发表新帖
发表新帖

Disabled input text color

前端 未结
关注
10 757
野性不改
野性不改 2020-12-22 22:06

The simple HTML below displays differently in Firefox and WebKit-based browsers (I checked in Safari, Chrome and iPhone).

In Firefox both border and text have the s

相关标签:
10条回答
  • 孤独总比滥情好
    2020-12-22 22:44

    You can use the readonly attribute instead of the disabled attribute, but then you will need to add a class because there isn't a pseudo-class input:readonly.

    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
button.readonly{
    border:solid 1px #880000;
    background-color:#ffffff;
    color:#880000;
}
</style>
</head>
<body>
<form action="">
    <button type="button" readonly="readonly" class="readonly">disabled input box</button>
</form>
</body>
</html>

    Beware that a disabled input and readonly input aren't the same. A readonly input can have focus, and will send values on submit. Look at w3.org

    0 讨论(0)
  • 囚心锁ツ
    2020-12-22 22:46 
    -webkit-text-fill-color: #880000;
opacity: 1; /* required on iOS */
    0 讨论(0)
  • 北荒
    2020-12-22 22:47

    it's an interesting question and I've tried plenty of overrides to see if I can get it going, but nothing's working. Modern browsers actually use their own style sheets to tell elements how to display, so maybe if you can sniff out Chrome's stylesheet you can see what styles they're forcing on to it. I'll be very interested in the result and if you don't have one I'll spend a little time myself looking for it later when I have some time to waste.

    FYI,

    opacity: 1!important;

    doesn't override it, so I'm not sure it's opacity.

    0 讨论(0)
  • 广开言路
    2020-12-22 22:49

    UPDATED 2019:

    Combining ideas from this page into a "set and forget" solution.

    input:disabled, textarea:disabled, input:disabled::placeholder, textarea:disabled::placeholder {
  -webkit-text-fill-color: currentcolor; /* 1. sets text fill to current `color` for safari */
  opacity: 1; /* 2. correct opacity on iOS */
}
    0 讨论(0)
  • 清酒与你
    2020-12-22 22:50

    Can you use a button instead of an input?

    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    button:disabled{
        border:solid 1px #880000;
        background-color:#ffffff;
        color:#880000;
    }
    </style>
</head>
<body>
    <form action="">
        <button type="button" disabled="disabled">disabled input box</button>
    </form>
</body>
</html>
    0 讨论(0)
  • 孤独总比滥情好
    2020-12-22 22:51

    If you want to fix the problem for all the disabled inputs, you can define -webkit-text-fill-color to currentcolor, so the color property of the input will be used.

    input[disabled] {
   -webkit-text-fill-color: currentcolor;
}

    See that fiddle on Safari https://jsfiddle.net/u549yk87/3/

    0 讨论(0)
 看不清?
提交回复
热议问题