屏蔽浏览器自动的input样式不影响设计整体的一致性

屏蔽浏览器自动的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样式不影响设计整体的一致性的攻略，希望能对你有所帮助。