Baddropdownarrowstylingonfirefoxandsafari

html5 • • 问答

My dropdowns look like the left on Chrome, but looks like the right on Firefox and Safari

How can I style my dropdown to look like the chrome version on safari and firefox? I don't like the grey background for the caret that shows on firefox
(I would also like to move the caret symbol a little bit to the left)

This is my css and html for the dropdown. You can click "Run code snippet" on firefox and see that it looks like the one on the right.

select{
    box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.7);
    border-radius: 1rem;
    padding: 0.25rem 0.5rem;
    border: 0;
}

select:active, select:focus{
   outline: none;
}
<select type="dropdown">
  <option>Option 1</option>
  <option>Option 2</option>
</select>
<select type="dropdown">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

回答

您应该重置默认样式并添加跨浏览器统一的自定义样式。下面这个片段应该有帮助

select{
  box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.7);
  border-radius: 1rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-right: 1rem;
  padding-left: 0.5rem;
  border: 0;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat, repeat;
  background-position: right .7em top 50%;
  background-size: .65em auto;
}

从这篇博文中阅读更多内容：https : //css-tricks.com/styling-a-select-like-its-2019/

以上是Baddropdownarrowstylingonfirefoxandsafari的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容