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;
}

因此，只需覆盖具有您自己属性的那些。假设你想要的东西在任何地方看起来都一样，所以只需按照你喜欢的方式设置边框样式。

覆盖Chrome UA文本输入样式

1 个答案: