Question

So in Chrome text inputs are added border like 2px inset.
What I’ve got is:

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

while .search-form is:

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

How do I check whether this is a Chrome UA or otherwise how do I override the rule?

Answer 1

The default stylesheet for Chrome relaing to inputs looks like this:

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

So, just override those with your own properties. Assumedly you want things to look the same everywhere, so just style the border how you like.