禁用的输入按钮CSS规则在Mobile Safari中不起作用

Question

我正在尝试使用CSS：disabled伪选择器设置禁用按钮的样式。由于某些原因，使用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截图：

为什么未在iOS Mobile Safari中使用禁用元素的“ border-radius” CSS规则？

Answer 1

弄清楚：默认情况下，iOS Mobile Safari将覆盖某些CSS规则（包括border-radius）。要禁用此行为，请设置以下规则：

-webkit-appearance:none;

https://developer.mozilla.org/en-US/docs/Web/CSS/appearance

禁用的输入按钮CSS规则在Mobile Safari中不起作用

问题描述投票：0回答：1

iOS屏幕截图：

Firefox截图：

为什么未在iOS Mobile Safari中使用禁用元素的“ border-radius” CSS规则？

1个回答

最新问题

禁用的输入按钮CSS规则在Mobile Safari中不起作用

问题描述 投票：0回答：1

iOS屏幕截图：

Firefox截图：

为什么未在iOS Mobile Safari中使用禁用元素的“ border-radius” CSS规则？

1个回答

最新问题

问题描述投票：0回答：1