发表新帖
发表新帖

Removing rounded corners from a <select> element in Chrome/Webkit

后端 未结
关注
15 1748
天命终不由人
天命终不由人 2020-12-07 09:06

The user-agent stylesheet for Chrome gives a border-radius of 5px to all the corners of a

提交评论
  •  加载中...
  • 轮回少年
    2020-12-07 09:51

    This works for me (styles the first appearance not the dropdown list):

    select {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
}

    http://jsfiddle.net/fMuPt/

    0 讨论(0)
  • 别跟我提以往
    2020-12-07 09:55

    If you want square borders and still want the little expander arrow, I recommend this:

    select.squarecorners{
     border: 0;
     outline: 1px solid #CCC;
     background-color: white;
}
    0 讨论(0)
  • 北荒
    2020-12-07 09:56

    well i got the solution. hope it may help you :)

    select{
      border-image: url(http://www.w3schools.com/cssref/border.png) 30 stretch;
      width: 120px;
      height: 36px;
      color: #999;
  }
    <select>
  <option value="1">Hi</option>
  <option value="2">Bye</option>
</select>

    0 讨论(0)
  • 借酒劲吻你
    2020-12-07 09:56

    firefox: 18

    .squaredcorners {
    -moz-appearance: none;
}
    0 讨论(0)
  • 夕颜
    2020-12-07 10:00

    Just my solution with dropdown image (inline svg)

    select.form-control {
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='%23444' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
    background-position: 100% 50%;
    background-repeat: no-repeat;
}

    I'm using bootstrap that's why I used select.form-control
    You can use select{ or select.your-custom-class{ instead.

    0 讨论(0)
    • 上一页 1 2 3 下一页
     看不清?
    提交回复
    热议问题