Я пытаюсь стилизовать отключенные кнопки, используя псевдо-селектор CSS: disabled. По какой-то причине правило "border-radius" не соблюдается в iOS Mobile Safari. Я написал простую HTML-страницу, чтобы продемонстрировать проблему (ошибка?). Следующий пример работает в Firefox, Chrome и IE / Edge, но не на iPhone / iPod Touch. Вы можете протестировать пример, скопировав / вставив код HTML в https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
. Прокрутите вниз, чтобы увидеть снимки экрана с примером:
<!DOCTYPE html>
<html>
<head>
<title>iOS Safari CSS But Demonstration</title>
<style>
input[type="button"],
input[type="submit"],
button,
input[type="button"]:disabled,
input[type="submit"]:disabled,
button:disabled {
min-width:300px;
cursor: pointer;
border-width: 1px;
border-style:solid;
border-color: rgba(0, 0, 0, 0.5);
color: #000000;
font-size: inherit;
padding: 2px 10px;
text-align: center;
opacity: 1;
/*
neither of the following border-radius rules
seem to work in iOS Safari
*/
border-radius: 0px !important;
-webkit-border-radius: 0px !important;
}
</style>
</head>
<body>
Disabled Input Example--the following disabled input<br/>
is supposed to have square corners (border-radius: 0px) but<br/>
instead they are rounded when viewed in an iOS Safari browser:<br/>
<input type="button" value="I should have square corners." disabled/>
</body>
</html>
Снимок экрана iOS:
Снимок экрана Firefox:
Почему CSS-правила "border-radius" отключеныэлементы, не соблюдаемые в iOS Mobile Safari?