屏蔽浏览器自动的input样式是一个常见的需求，因为浏览器自带的input样式可能不符合设计要求，会影响网站整体的一致性。以下是一些攻略，可以帮助你屏蔽浏览器自动的input样式。
方案一：使用伪类
可以使用伪类来屏蔽浏览器自动的input样式，具体做法如下：
input[type="text"],
input[type="password"],
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
上面的代码将textarea和type为text、password的input元素的默认样式设置为none，使用上述代码可以屏蔽浏览器自动的input样式，使得input样式可以自由地修改。
方案二：使用自定义样式
相比于使用伪类，使用自定义样式可以带来更多的灵活性。可以在自定义样式中修改input元素的样式，从而达到屏蔽浏览器自动的input样式的目的。具体做法如下：
input[type="text"],
input[type="password"],
textarea {
border: 1px solid #aaa;
border-radius: 5px;
padding: 10px;
font-size: 14px;
}
上面的代码将textarea和type为text、password的input元素的样式设置为有边框、圆角、内边距、14px字体大小的样式，使用上述代码可以屏蔽浏览器自动的input样式，使得input样式可以自由地修改。
示例一：修改输入框的placeholder样式
在某些情况下，placeholder颜色、字体大小等样式需要进行修改，可以使用如下代码：
input[type="text"]::-webkit-input-placeholder,
input[type="password"]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #999;
font-size: 14px;
}
上面的代码设置了placeholder的颜色和字体大小，使用此方法可以实现修改placeholder样式。
示例二：自定义checkbox样式
有时候需要自定义checkbox样式，可以使用如下代码：
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label {
display: inline-block;
padding-left: 22px;
line-height: 20px;
background-repeat: no-repeat;
background-position: 0 0;
font-size: 14px;
}
input[type="checkbox"]:checked + label {
background-position: 0 -20px;
}
上面的代码设置了checkbox的样式，使用此方法可以实现自定义checkbox样式。
以上是屏蔽浏览器自动的input样式不影响设计整体的一致性的攻略，希望能对你有所帮助。
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！