X
點擊此處開啟此網站的行動版。

技術支援討論區

Hide a <select> arrow in Firefox 30

已張貼

Is there a way to hide the arrow of a <select> element in Firefox 30 using CSS?

Maybe there's a hidden (pseudo) element or property I can access?

I couldn't find anything on https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Mozilla_Extensions. I tried a couple of -moz-appearance values, but they either add styling I cannot remove, or they do not allow restyling, or they still show the arrow.

In Firefox 29, there was a hack that worked, described here: https://gist.github.com/joaocunha/6273016 it no longer works in Firefox 30. There is also a bug about the unstylability of select elements here: https://bugzilla.mozilla.org/show_bug.cgi?id=649849. If anyone can point me to a changeset that might have changed this in Firefox 30, I'm also interested. I know I can hide the arrow by overlaying an element, or by nesting the select and hiding the overflow, I’m not really interested in that.

Is there a way to hide the arrow of a <select> element in Firefox 30 using CSS? Maybe there's a hidden (pseudo) element or property I can access? I couldn't find anything on https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Mozilla_Extensions. I tried a couple of -moz-appearance values, but they either add styling I cannot remove, or they do not allow restyling, or they still show the arrow. In Firefox 29, there was a hack that worked, described here: https://gist.github.com/joaocunha/6273016 it no longer works in Firefox 30. There is also a bug about the unstylability of select elements here: https://bugzilla.mozilla.org/show_bug.cgi?id=649849. If anyone can point me to a changeset that might have changed this in Firefox 30, I'm also interested. I know I can hide the arrow by overlaying an element, or by nesting the select and hiding the overflow, I’m not really interested in that.

被選擇的解決方法

A lot of -moz-appearance's work, but unfortunately not in combination with a border or background.

I cannot change the markup in all places because I would break existing other widgets, so for now Firefox users get a slightly uglier dropdown.

從原來的回覆中察看解決方案 13

額外的系統細節

已安裝的外掛程式

  • Shockwave Flash 13.0 r0

應用程式

  • Firefox 30.0
  • 使用者代理:Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:30.0) Gecko/20100101 Firefox/30.0
  • 技術支援網址:https://support.mozilla.org/1/firefox/30.0/Darwin/en-GB/

擴充套件

  • Abduction! 3.5.0 ({b0e1b4a6-2c6f-4e99-94f2-8e625d7ae255})
  • Auto Reload 1.20 (autoreload@yz.com)
  • Bookmark Deduplicator 1.2 (bookmarkdeduplicator@foxhatdev)
  • Clearly 10.1.1.2 (readable@evernote.com)
  • Custom Tab Width 1.0.1 (tab-width@design-noir.de)
  • Firebug 1.12.8 (firebug@software.joehewitt.com)
  • Ghostery 5.2.1 (firefox@ghostery.com)
  • Greasemonkey 1.15 ({e4a8a97b-f2ed-450b-b12d-ee082ba24781})
  • HTTPS Finder 0.85 ({6bdc61ae-7b80-44a3-9476-e1d121ec2238})
  • keyword.URL Hack! 0.4.0 (keyword@evilpie.com)
  • MeasureIt 0.4.13 ({75CEEE46-9B64-46f8-94BF-54012DE155F0})
  • Rainbow 1.6 (rainbow@colors.org)
  • Restart Button 0.1.5 (restartbutton@strk.jp)
  • Troubleshooter 1.1a (troubleshooter@mozilla.org)
  • URL Suffix 0.7.1 ({77a873d0-4afd-11d9-9669-0800200c9a66})
  • User Agent Switcher 0.7.3 ({e968fc70-8f95-4ab9-9e79-304de2a71ee1})

JavaScript

  • incrementalGCEnabled: True

圖形

  • adapterDescription:
  • adapterDeviceID: 0x 863
  • adapterDrivers:
  • adapterRAM:
  • adapterVendorID: 0x10de
  • driverDate:
  • driverVersion:
  • info: {u'AzureCanvasBackend': u'quartz', u'AzureFallbackCanvasBackend': u'none', u'AzureContentBackend': u'quartz', u'AzureSkiaAccelerated': 0}
  • numAcceleratedWindows: 1
  • numTotalWindows: 1
  • webglRenderer: NVIDIA Corporation -- NVIDIA GeForce 9400M OpenGL Engine
  • windowLayerManagerRemote: True
  • windowLayerManagerType: OpenGL

修改過的偏好設定

  • accessibility.typeaheadfind.flashBar: 0
  • browser.cache.disk.capacity: 1048576
  • browser.cache.disk.smart_size.first_run: False
  • browser.cache.disk.smart_size_cached_value: 870400
  • browser.cache.memory.max_entry_size: 15120
  • browser.history_expire_days.mirror: 180
  • browser.places.importBookmarksHTML: False
  • browser.places.smartBookmarksVersion: 7
  • browser.sessionstore.resume_from_crash: False
  • browser.sessionstore.upgradeBackup.latestBuildID: 20140512231802
  • browser.startup.homepage: about:newtab
  • browser.startup.homepage_override.buildID: 20140512231802
  • browser.startup.homepage_override.mstone: 30.0
  • browser.tabs.tabClipWidth: 300
  • browser.tabs.warnOnClose: False
  • browser.urlbar.autoFill: False
  • dom.disable_window_open_feature.status: False
  • dom.disable_window_status_change: False
  • dom.max_chrome_script_run_time: 0
  • dom.mozApps.used: True
  • dom.w3c_touch_events.expose: False
  • extensions.checkCompatibility: False
  • extensions.checkCompatibility.10.0: False
  • extensions.checkCompatibility.10.0a: False
  • extensions.checkCompatibility.11.0: False
  • extensions.checkCompatibility.11.0a: False
  • extensions.checkCompatibility.3.6: False
  • extensions.checkCompatibility.3.6.previous: False
  • extensions.checkCompatibility.3.6b: False
  • extensions.checkCompatibility.3.6b.previous: False
  • extensions.checkCompatibility.3.6p: False
  • extensions.checkCompatibility.3.6p.previous: False
  • extensions.checkCompatibility.3.6pre: False
  • extensions.checkCompatibility.3.6pre.previous: False
  • extensions.checkCompatibility.3.7a: False
  • extensions.checkCompatibility.3.7a.previous: False
  • extensions.checkCompatibility.4.0: False
  • extensions.checkCompatibility.4.0.previous: False
  • extensions.checkCompatibility.4.0b: False
  • extensions.checkCompatibility.4.0b.previous: False
  • extensions.checkCompatibility.4.0p: False
  • extensions.checkCompatibility.4.0p.previous: False
  • extensions.checkCompatibility.4.0pre: False
  • extensions.checkCompatibility.4.0pre.previous: False
  • extensions.checkCompatibility.4.2: False
  • extensions.checkCompatibility.4.2.previous: False
  • extensions.checkCompatibility.4.2a: False
  • extensions.checkCompatibility.4.2a.previous: False
  • extensions.checkCompatibility.4.2b: False
  • extensions.checkCompatibility.4.2b.previous: False
  • extensions.checkCompatibility.4.2p: False
  • extensions.checkCompatibility.4.2p.previous: False
  • extensions.checkCompatibility.4.2pre: False
  • extensions.checkCompatibility.4.2pre.previous: False
  • extensions.checkCompatibility.5.0: False
  • extensions.checkCompatibility.5.0.previous: False
  • extensions.checkCompatibility.5.0a: False
  • extensions.checkCompatibility.5.0a.previous: False
  • extensions.checkCompatibility.5.0b: False
  • extensions.checkCompatibility.5.0b.previous: False
  • extensions.checkCompatibility.5.0p: False
  • extensions.checkCompatibility.5.0p.previous: False
  • extensions.checkCompatibility.5.0pre: False
  • extensions.checkCompatibility.5.0pre.previous: False
  • extensions.checkCompatibility.6.0: False
  • extensions.checkCompatibility.6.0.previous: False
  • extensions.checkCompatibility.6.0a: False
  • extensions.checkCompatibility.6.0a.previous: False
  • extensions.checkCompatibility.7.0: False
  • extensions.checkCompatibility.7.0.previous: False
  • extensions.checkCompatibility.7.0a: False
  • extensions.checkCompatibility.7.0a.previous: False
  • extensions.checkCompatibility.8.0: False
  • extensions.checkCompatibility.8.0.previous: False
  • extensions.checkCompatibility.8.0a: False
  • extensions.checkCompatibility.8.0a.previous: False
  • extensions.checkCompatibility.9.0: False
  • extensions.checkCompatibility.9.0a: False
  • extensions.checkCompatibility.nightly: False
  • extensions.checkCompatibility.nightly.previous: False
  • extensions.checkCompatibility.previous: False
  • extensions.lastAppVersion: 30.0
  • font.internaluseonly.changed: True
  • font.name.monospace.x-western: Consolas
  • font.size.fixed.x-western: 12
  • gfx.font_rendering.cleartype_params.rendering_mode: 2
  • keyword.URL: https://duckduckgo.com/?q=!%20
  • network.cookie.prefsMigrated: True
  • places.database.lastMaintenance: 1400146779
  • places.history.expiration.transient_current_max_pages: 104858
  • places.history.expiration.transient_optimal_database_size: 161061272
  • places.last_vacuum: 1296560228
  • plugin.disable_full_page_plugin_for_types: application/pdf
  • plugin.importedState: True
  • plugin.state.default browser: 0
  • plugin.state.flash: 1
  • plugin.state.flip4mac wmv plugin: 0
  • plugin.state.googletalkbrowserplugin: 0
  • plugin.state.iphotophotocast: 0
  • plugin.state.java: 0
  • plugin.state.logmein: 0
  • plugin.state.npgtpo3dautoplugin: 0
  • plugin.state.o1dbrowserplugin: 0
  • plugin.state.quicktime plugin: 0
  • privacy.clearOnShutdown.cookies: False
  • privacy.clearOnShutdown.offlineApps: True
  • privacy.cpd.cookies: False
  • privacy.cpd.extensions-tabmix: False
  • privacy.cpd.formdata: False
  • privacy.cpd.sessions: False
  • privacy.donottrackheader.enabled: True
  • privacy.sanitize.migrateFx3Prefs: True
  • privacy.sanitize.sanitizeOnShutdown: True
  • privacy.sanitize.timeSpan: 0
  • security.dialog_enable_delay: 1
  • security.disable_button.openCertManager: False
  • security.disable_button.openDeviceManager: False
  • security.OCSP.enabled: 0
  • security.tls.version.max: 1
  • security.warn_viewing_mixed.show_once: False
  • storage.vacuum.last.index: 1
  • storage.vacuum.last.places.sqlite: 1398332421

其他

  • User JS: 否
  • 輔助功能: 否
Kohei 9 個解決方法 62 個答案

I left a comment in the bug. -moz-appearance:treeitem works for me, but if you really want to style the <select> element, you may want to create a custom widget yourself.

I left a comment in the [https://bugzilla.mozilla.org/show_bug.cgi?id=649849 bug]. -moz-appearance:treeitem works for me, but if you really want to style the <select> element, you may want to create a custom widget yourself.

選擇的解決方法

A lot of -moz-appearance's work, but unfortunately not in combination with a border or background.

I cannot change the markup in all places because I would break existing other widgets, so for now Firefox users get a slightly uglier dropdown.

A lot of -moz-appearance's work, but unfortunately not in combination with a border or background. I cannot change the markup in all places because I would break existing other widgets, so for now Firefox users get a slightly uglier dropdown.
Currelis 0 個解決方法 1 個答案

I encountered this issue when I received a message from my client saying his select element arrows were messed up in firefox 30.

What I can already tell you is that none of the old CSS hacks work anymore.

There are a few alternative CSS solutions, I wrote a blog post about this to inform people, makes it a bit easier too as it's more detailed than a forum post.

http://www.currelis.com/firefox-30-0-select-arrow-css-longer-works.html

Good luck!

I encountered this issue when I received a message from my client saying his select element arrows were messed up in firefox 30. What I can already tell you is that none of the old CSS hacks work anymore. There are a few alternative CSS solutions, I wrote a blog post about this to inform people, makes it a bit easier too as it's more detailed than a forum post. http://www.currelis.com/firefox-30-0-select-arrow-css-longer-works.html Good luck!
Bharathiraj 0 個解決方法 3 個答案

If you really wanna hide the dropdown arrow you can use this

#dropdown 
{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
If you really wanna hide the dropdown arrow you can use this <pre><nowiki>#dropdown { -webkit-appearance: none; -moz-appearance: none; appearance: none; }</nowiki></pre>

由 cor-el 於 修改