Question

以下是代码，问题是它在桌面浏览器上工作正常，即禁用输入的红色，但在移动浏览器上它不显示红色，而不是灰色，任何想法？

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>testing</title>
    <style>
    input[disabled] {
        color: #f55;
        font-weight: bold;
    }
    </style>
</head>
<body>
    <section>
        <form id="myForm" method="post" action="forms.php">
            <input type="text" name="username" value="Username" disabled> <br>
            <input type="password" name="password" placeholder="Password"> <br>
            <input type="submit" name="submit"> <br>
        </form> 
    </section>
</body>
</html>

Answer 1

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>testing</title>
    <style>
    input[disabled] {
        color: #f55;
        font-weight: bold;
    }
    @media only screen and (max-width:1000px) {
        input[disabled]{
            color: #C90;
             font-weight:bold;
    }
    </style>
</head>
<body>
    <section>
        <form id="myForm" method="post" action="forms.php">
            <input type="text" name="username" value="Username" disabled> <br>
            <input type="password" name="password" placeholder="Password"> <br>
            <input type="submit" name="submit"> <br>
        </form> 
    </section>
</body>
</html>

您可以使用媒体查询，而不是将此样式放在html文档中，为长css保留外部样式表更合适....您可以通过在@中设置不同设备的最大宽度来定位不同的设备css内的媒体

如何更改/禁用在移动浏览器中输入文本颜色？

1 个答案: