发表新帖
发表新帖

How can I hide a <select> arrow in Firefox 30+?

后端 未结
关注
6 944
别跟我提以往
别跟我提以往 2020-12-19 00:45

This hack used to work in <= Firefox 29 to remove a

提交评论
  •  加载中...
  • 时光说笑
    2020-12-19 01:24

    /* For mozilla Firefox 30.0+ I used the following to coverup the reappearing arrow: */

    @-moz-document url-prefix() {

    .yourClass:after {
    position: absolute;
    margin-left: -25px;
    border-radius: 4px;
    content: url('../images/pathToYourDownArrowImage.svg');
    pointer-events: none;
    overflow: hidden;
}

    /* I still use this to move the text over */

    .yourClass select {
    text-overflow: '';
    text-indent: -1px;
    -moz-appearance: none;
    background: none;
}

    }

    0 讨论(0)
  • 温柔的废话
    2020-12-19 01:33

    As @mircea c alluded to ...

    If your HTML looks like this:

    <div class="styled-select">
   <select>
     <option>Here is the first option</option>
     <option>The second option</option>
     <option>The thrid option</option>
   </select>
</div>

    Then you can remove the dropdown arrow in Firefox 30+

    .styled-select { 
  overflow: hidden; 
  width: 200px;
}

@-moz-document url-prefix(){
  .styled-select select { width: 110%; }
}

    Working demo: codepen

    FYI: The same technique works in IE 8 & 9, just use a conditional comment instead of @-moz-document url-prefix()

    0 讨论(0)
  • 别跟我提以往
    2020-12-19 01:36

    Firefox > 29 -moz-appearance:none; working, But have a problem with width, we extend the width of select from 100 to 110% to hide, but it affects the design of a forms, So i just hide it with a div and over come it,

    Check the codepen version

    http://codepen.io/ssbalakumar/pen/jgLEq

    0 讨论(0)
  • 栀梦
    2020-12-19 01:37

    I fixed my this issue by giving some style to div and select individually.

    Anyone can change his width and other style properties a/c to needs. :)

    Here is the js fiddle for it. JSFIDDLE

    <div  class="common-dropdown-small-div" style="width: 220px">
<select id="select" class="common-dropdown-project-select">
    <option>
        apple
    </option>
    <option>
        blackberry
    </option>
    <option>
       pumpkin
    </option>
</select>


    .common-dropdown-small-div{
border: 1px solid rgb(208, 208, 208);
overflow: hidden; 
width: 220px;  }

.common-dropdown-project-select{
  width: 100% !important;
background-image: url("http://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png");
background-position: 97% 60%, 0 0 ! important;    
 background-repeat: no-repeat;
background-size: 25px 16px;
border: none  ! important;    
outline : medium none !important;
display: inline-flex !important;
height: 33px !important;
vertical-align: top;
-webkit-appearance: none; }

select::-ms-expand {
display: none;}
    0 讨论(0)
  • 情话喂你
    2020-12-19 01:39

    Put the select in another container which has overflow: hidden;, make the select wider than the container. If you want a border, add it to the container.

    An example is the select at the bottom of this page: https://mozillians.org/en-US/

    0 讨论(0)
    •  看不清?
    提交回复
    热议问题