CSS中如何修改浏览器自带样式

用户9914333

发布于 2022-07-21 19:44:16

1.7K0

发布于 2022-07-21 19:44:16

文章被收录于专栏：bug收集bug收集

1 . 浏览器自带样式真的不能修改吗？

如下代码，使用选择器选中了radio与checkbox,但设置的样式不生效

input[type="radio"],input[type="checkbox"] {
    border: 6px solid black;
}

2. 如何修改

答案是可以修改，使用appearance属性，代码如下：

input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  border: 2px solid #999;
  transition: 0.2s all linear;
  outline: none;
  margin-right: 5px;
  position: relative;
  top: 4px;
}
input:checked {
  border: 6px solid black;
}

3. appearance属性介绍

默认情况下，单选按钮（和复选框）使用这些控件的操作系统本机样式设置样式。通过指定 appearance: none，您可以完全删除本机样式，并为其创建自己的样式。 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/radio
兼容性说明：如果要使用该appearance属性，则应非常仔细地对其进行测试。尽管大多数现代浏览器都支持它，但是其实现方式却千差万别。在较旧的浏览器中，即使关键字 none 在不同的浏览器中也不具有相同的效果，有些甚至根本不支持它。在最新的浏览器中，差异较小 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/radio

4. 代替appearance,修改浏览器自带样式（如:radio）

不需要用到js, 而是纯css, 个人推荐使用此方法，巧用了将radio隐藏，然后通过label的for属性来改变radio的选中状态，在利用:checked伪类与兄弟选择器（+）来修改label的样式。从而无需使用js

html:

<div>
<input type="radio" name="paixu" id="paixu1" checked>
<label for="paixu1" style="cursor:pointer">按热门排序</label>
<input type="radio" name="paixu" id="paixu2">
<label for="paixu2" style="cursor:pointer">按时间排序</label>
<input type="radio" name="paixu" id="paixu3">
<label for="paixu3" style="cursor:pointer">按评价排序</label>
</div>

css

div>input{
display: none;
}
div>label{
position: relative;
margin-right: 34px;
}
div>label::before{
display: inline-block;
content: "";
width: 16px;
height: 16px;
border-radius: 50%;
border: 1px solid rgb(219, 219, 219);
margin-right: 6px;
vertical-align: bottom;
}
div>input:checked+label::before{
background-color: rgb(239, 66, 56);
}
div>input:checked+label::after{
display: inline-block;
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
position: absolute;
left: 6px;
bottom: 6px;
background-color: white;
}

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-07-07，如有侵权请联系 cloudcommunity@tencent.com 删除

html