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

标签 html css forms mobile webforms

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

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

最佳答案

<!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 中的媒体

关于html - 如何在移动浏览器中更改/禁用输入文本颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21328916/

相关文章:

php - 从 HTML 表单中搜索多个 MySQL 表并按字母顺序返回数据

javascript - 在更改不透明度时更改另一个 div 内可点击 div 的点击事件

html - 我将如何使这个导航栏下拉?

html - 表格行内的 div 未扩展 100%

html - 左流体 div,中心拉伸(stretch)到最大宽度 div,右流体 div

css - 删除字体中不需要的空间 - css

javascript - Symfony 表单 AJAX 返回空对象

javascript - 防止 Enter 键用作鼠标单击

html 中的 JavaScript 错误

python - 使用 python requests 提交表单并获取结果