В Chrome добавление границы рамки также добавляет цвет фона. Зачем?

Question

Я пытаюсь добавить border-radius к кнопке ввода ввода, но когда я это сделаю, Chrome также добавляет серый цвет фона и тень окна.

Как я могу использовать радиус радиуса для округления углов и сохранить цвет фона белым и не иметь тени окна?

Вот мой HTML:

<input type="submit" id="nm-match" class="nm-button" value="Match" /> 

И мой CSS:

.nm-button { 
    border-radius: 5px; 
} 

Вот демо проблемы: http://jsfiddle.net/CJg43/3/

Answer 1

Используйте инспектор на хроме и перейдите к элементу .м -кнопка. (самый быстрый способ щелкнуть правой кнопкой мыши прямо на кнопке и сказать элемент проверки). Если вы посмотрите на вкладку «Элементы» (которая должна быть первой, выскочила и посмотрела в правой части в разделе стилей, она покажет все стили CSS применимы к этому элементу, были ли они помещены туда вами или хромом (классная вещь в этом разделе стилей - это стили в порядке приоритета, поэтому вы можете легко определить, какие стили переписываются, которые (тем, что более высокие стили заменяют нижние)) или даже если они являются стандартными для элемента (пример display: block; всегда находятся на элементах уровня блока, таких как div.) Это удобный инструмент.

Итак, если вы сделаете это в своем случае, вы увидите, что хром применяет разные стили для ввода стилей, которые в основном применяются, потому что вход [type = "submit"]. Если вы хотите переписать эти стили для большей части t просто переписывать одни и те же стили в вашем классе на вашей кнопке должно быть достаточно. добавив следующий должно быть хорошо, если вы только хотите, чтобы перезаписать стили для цвета фона «окно-тень» (что это на самом деле граница, что создает эту тень, так просто добавить новую границу)

.nm-button { 
    border-radius: 5px; 
    background-color: #fff; 
    border: 1px solid #ccc; 
} 

Также так как это кнопка предлагает что-то вроде следующего кода, поэтому он выглядит интерактивным.

.nm-button:hover { 
    background-color: #ddd; 
    cursor: pointer; 
} 

Здесь представлены стили, наложенные хром в вашем случае. Это много, но хром также очень минималистичен в своем подходе, так что все это легко перезаписывается. (P.S. Надеюсь, что это помогло, не стесняйтесь оставить комментарий, если у вас есть какие-либо вопросы.)

input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button { 
    padding: 1px 6px; 
} 
user agent stylesheetinput[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button { 
    align-items: flex-start; 
    text-align: center; 
    cursor: default; 
    color: buttontext; 
    padding: 2px 6px 3px; 
    border: 2px outset buttonface; 
    border-image-source: initial; 
    border-image-slice: initial; 
    border-image-width: initial; 
    border-image-outset: initial; 
    border-image-repeat: initial; 
    background-color: buttonface; 
    box-sizing: border-box; 
} 
user agent stylesheetinput[type="button"], input[type="submit"], input[type="reset"] { 
-webkit-appearance: push-button; 
    white-space: pre; 
} 
user agent stylesheetinput, input[type="password"], input[type="search"], isindex { 
    -webkit-appearance: textfield; 
    padding: 1px; 
    background-color: white; 
    border: 2px inset; 
    border-image-source: initial; 
    border-image-slice: initial; 
    border-image-width: initial; 
    border-image-outset: initial; 
    border-image-repeat: initial; 
    -webkit-rtl-ordering: logical; 
    -webkit-user-select: text; 
    cursor: auto; 
} 
user agent stylesheetinput, textarea, keygen, select, button, isindex { 
    margin: 0em; 
    font: -webkit-small-control; 
    color: initial; 
    letter-spacing: normal; 
    word-spacing: normal; 
    text-transform: none; 
    text-indent: 0px; 
    text-shadow: none; 
    display: inline-block; 
    text-align: start; 
} 
user agent stylesheetinput, textarea, keygen, select, button, isindex, meter, progress { 
    -webkit-writing-mode: horizontal-tb; 
}