覆盖Chrome UA文本输入样式

Question

因此，在Chrome中，文本输入添加了类似于2px inset的边框。我得到的是：

.search-form p input[type=text] {    
    width: 170px;        
}

而.search-form是：

.search-form {
    width: 174px;    
    padding: 10px;
    border: 1px solid #F2E1D5;
}

如何检查这是否是Chrome UA，或者如何覆盖规则？

Answer 1

Chrome重新启动输入的默认样式表如下所示：

input, input[type="password"], input[type="search"], isindex {
    -webkit-appearance: textfield;
    padding: 1px;
    background-color: white;
    border: 2px inset;
    border-image: initial;
    -webkit-rtl-ordering: logical;
    -webkit-user-select: text;
    cursor: auto;
}

input, textarea, keygen, select, button, isindex {
    margin: 0em;
    font: -webkit-small-control;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: -webkit-auto;
}

因此，只需使用您自己的属性覆盖这些属性。假设你想让所有地方的东西看起来都一样，所以只要按照你喜欢的方式设计边框就行了。