发表新帖
发表新帖

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

后端 未结
关注
15 1749
天命终不由人
天命终不由人 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 10:05

    Solution with custom right drop-down arrow, uses only css (no images)

    select {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
  background-size: 5px 5px, 5px 5px, 1px 1.5em;
  background-repeat: no-repeat;

  -moz-appearance: none;
  display: block;
  padding: 0.3rem;
  height: 2rem;
  width: 100%;
}
    <html>

<body>
  <br/>
  <h4>Example</h4>
  <select>
    <option></option>
    <option>Hello</option>
    <option>World</option>
  </select>
</body>

</html>

    0 讨论(0)
  • 攒了一身酷
    2020-12-07 10:05

    One way to keep it simple and avoid messing with the arrows and other such features is just to house it in a div with the same background color as the select tag.

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