发表新帖
发表新帖

CSS for the “down arrow” on a <select> element?

后端 未结
关注
11 949
你的背包
你的背包 2020-12-01 02:07

Is it possible to stylize the down arrow on a drop down select element? i.e., ()

I suspe

相关标签:
11条回答
  • 春和景丽
    2020-12-01 02:32

    http://jsfiddle.net/u3cybk2q/2/ check on windows, iOS and Android (iexplorer patch)

    .styled-select select {
   background: transparent;
   width: 240px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
}
.styled-select {
   width: 240px;
   height: 34px;
   overflow: visible;
   background: url(http://nightly.enyojs.com/latest/lib/moonstone/dist/moonstone/images/caret-black-small-down-icon.png) no-repeat right #FFF;
   border: 1px solid #ccc;
}
.styled-select select::-ms-expand {
    display: none; /*patch iexplorer*/
}
      <div class="styled-select">
       <select>
          <option>Here is the first option</option>
          <option>The second option</option>
       </select>
    </div>

    0 讨论(0)
  • 借酒劲吻你
    2020-12-01 02:34

    You can achieve this with just CSS and your down arrow as an image positioned absolute with a "pointer-events: none;" see my example below:

    <select>
  <option value="1">1 Person</option>
  <option value="2">2 People</option>
</select>
<img class="passthrough" src="downarrow.png" />

.passthrough {
    pointer-events: none;
    position: absolute;
    right: 0;
}
    0 讨论(0)
  • Happy的楠姐
    2020-12-01 02:38

    The drop-down is platform-level element, you can't apply CSS to it.

    You can overlay an image on top of it using CSS, and call the click event in the element beneath.

    0 讨论(0)
  • 伪装坚强ぢ
    2020-12-01 02:41

    You would need to create your own dropdown using hidden divs and a hidden input element to record which option was "selected". My guess is that @Jan Hancic's link he posted is probably what you're looking for.

    0 讨论(0)
  • 误落风尘
    2020-12-01 02:41

    Try this

       <div style='position:relative;left:0px;top:0px;
        onMouseOver=document.getElementById('visible').style.visibility='visible' 
        id='hidden'>10
   <select style='position:absolute;left:0px;top:0px;cursor:pointer;visibility:hidden;'
        onMouseOut=document.getElementById('visible').style.visibility='hidden'
        onChange='this.form.submit()' 
        id='visible' multiple size='3'>";
   <option selected value=10>10</option>
   <option value=20>20</option>
   <option value=50>50</option>
   </select>
   </div>
    0 讨论(0)
  • 陌清茗
    2020-12-01 02:43

    This will change inputs, select etc to the old style grey not sure if you can manipulate after that: In <head> put:

    <meta http-equiv="MSThemeCompatible" content="NO">
    0 讨论(0)
 看不清?
提交回复
热议问题