gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-27 23:06:27 25 4
gpt4 key购买 nike

我正在尝试使用 CSS :disabled 伪选择器来设置禁用按钮的样式。出于某种原因,使用 iOS Mobile Safari 时不遵守“border-radius”规则。我写了一个简单的 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 截图:

enter image description here

Firefox 截图:

enter image description here

为什么 iOS Mobile Safari 不遵守禁用元素的“border-radius”CSS 规则?

最佳答案

明白了:默认情况下,iOS Mobile Safari 会覆盖一些 CSS 规则(包括 border-radius)。要禁用此行为,请设置以下规则:

-webkit-appearance:none;

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

关于css - 禁用的输入按钮 CSS 规则在 Mobile Safari 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58718225/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com