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

【问题标题】：How to change/disabled Input text color in mobile browser?如何在移动浏览器中更改/禁用输入文本颜色？
【发布时间】：2014-01-24 09:26:44
【问题描述】：

以下是代码，问题是它在桌面浏览器上运行良好，即禁用输入的红色，但在移动浏览器上它不显示红色，而是显示灰色，有什么想法吗？

<!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>

【问题讨论】：

标签： html css forms mobile webforms

【解决方案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中的媒体

【讨论】：