How to remove the arrow from a <select> tag in Firefox

SUBMITTED BY: Guest

DATE: Nov. 13, 2013, 9:25 p.m.

FORMAT: Text only

SIZE: 1.7 kB

Raw Download

HITS: 828

Report
  1. How to remove the arrow from a <select> tag in Firefox
  2. #dropdown {
  3. -webkit-appearance: none;
  4. -moz-appearance: none;
  5. appearance: none;
  6. padding: 2px 30px 2px 2px;
  7. border: none;
  8. background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat right center;
  9. }
  11. select {
  12. overflow:hidden;
  13. width: 120%;
  14. }
  16. -moz-appearance: window;
  18. select {
  19. -webkit-appearance: normal;
  20. -moz-appearance: normal;
  21. appearance: normal;
  22. }
  23. .selectwrap { position: relative; }
  24. .selectwrap:before {
  25. content: "";
  26. height: 0;
  27. width: 0;
  28. border: .9em solid red;
  29. background-color: red;
  30. position: absolute;
  31. right: -.1em;
  32. z-index: 42;
  33. }
  35. .select {
  36. opacity : 0;
  37. width: 200px;
  38. height: 15px;
  39. }
  41. <select class='select'>
  42. <option value='foo'>bar</option>
  43. </select>
  45. .div {
  46. width: 200px;
  47. height: 15px;
  48. position: absolute;
  49. z-index: 0;
  50. }
  52. <div class='.div'>{the text of the the current selection updated by javascript}</div>
  53. <select class='select'>
  54. <option value='foo'>bar</option>
  55. </select>
  57. $('.select').click(function(event)) {
  58. $('.div').html($('.select option:selected').val());
  59. }
  61. body {
  62. scrollbar-face-color: #6685CA;
  63. scrollbar-highlight-color: #6685CA;
  64. scrollbar-shadow-color: #6685CA;
  65. scrollbar-3dlight-color:#FFFFFF;
  66. scrollbar-arrow-color:#FFFFFF;
  67. scrollbar-track-color:#E5E5E5;
  68. scrollbar-drakshadow-color:#000000;
  69. }
comments powered by Disqus