비활성화 된 입력 텍스트 색상
아래의 간단한 HTML은 Firefox 및 WebKit 기반 브라우저에서 다르게 표시됩니다 (Safari, Chrome 및 iPhone에서 확인했습니다).
Firefox에서는 테두리와 텍스트의 색상이 같지만 ( #880000) Safari에서는 텍스트가 약간 밝아집니다 (투명도가 적용된 것처럼).
어떻게 든이 문제를 해결할 수 있습니까 (Safari에서이 투명도 제거)?
업데이트 :
귀하의 답변에 감사드립니다. 나는 더 이상 내 작업에 필요하지 않지만 ( input요소를 스타일이 지정된 div요소로 대체하는 대신 비활성화하는 대신 ) 왜 이런 일이 발생 하고이 동작을 제어 할 수 있는지 궁금합니다 ...
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
input:disabled{
border:solid 1px #880000;
background-color:#ffffff;
color:#880000;
}
</style>
</head>
<body>
<form action="">
<input type="text" value="disabled input box" disabled="disabled"/>
</form>
</body>
</html>
-webkit-text-fill-color: #880000;
opacity: 1; /* required on iOS */
휴대폰 및 태블릿 웹킷 브라우저 (Safari 및 Chrome) 및 데스크톱 IE에는 비활성화 된 입력의 스타일을 지정하려는 경우 재정의해야하는 비활성화 된 양식 요소에 대한 여러 가지 기본 변경 사항이 있습니다.
-webkit-text-fill-color:#880000; /* Override iOS / Android font color change */
-webkit-opacity:1; /* Override iOS opacity change affecting text & background color */
color:#880000; /* Override IE font color change */
그것은 흥미로운 질문이고 나는 그것을 얻을 수 있는지 확인하기 위해 많은 재정의를 시도했지만 아무것도 작동하지 않습니다. 최신 브라우저는 실제로 자체 스타일 시트를 사용하여 요소를 표시하는 방법을 알려주므로 Chrome의 스타일 시트를 살펴보면 어떤 스타일이 적용되는지 확인할 수 있습니다. 나는 결과에 매우 관심이있을 것이고, 만약 당신이 하나가 없다면 나는 나중에 시간을 낭비 할 시간이있을 때 그것을 찾기 위해 조금 시간을 할애 할 것입니다.
참고로,
opacity: 1!important;
재정의하지 않으므로 불투명도가 확실하지 않습니다.
당신은 색상을 변경할 수있는 #440000사파리 불과하지만, 최고의 솔루션이 될 것 이럴 하지 않는 버튼의 변화 모습 에 모두 . 이렇게하면 모든 플랫폼의 모든 브라우저에서 사용자가 기대하는 것처럼 보입니다.
disabled 속성 대신 readonly 속성을 사용할 수 있지만 가상 클래스 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>
비활성화 된 입력과 읽기 전용 입력은 동일하지 않습니다. 읽기 전용 입력은 포커스를 가질 수 있으며 제출시 값을 보냅니다. w3.org를 보세요
@ryan 용
비활성화 된 입력 상자가 일반 입력 상자처럼 보이기를 원했습니다. 이것은 Safari Mobile에서 작동하는 유일한 것입니다.
-webkit-text-fill-color: rgba(0, 0, 0, 1);
-webkit-opacity: 1;
background: white;
이 질문은 매우 오래되었지만 업데이트 된 웹킷 솔루션을 게시 할 것이라고 생각했습니다. 다음 CSS를 사용하십시오.
input::-webkit-input-placeholder {
color: #880000;
}
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/
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 */
}
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>
참고URL : https://stackoverflow.com/questions/262158/disabled-input-text-color
'program story' 카테고리의 다른 글
| 세트 복사 Java (0) | 2020.10.14 |
|---|---|
| OS X의 Matplotlib 문제 ( "ImportError : _thread 이름을 가져올 수 없음") (0) | 2020.10.13 |
| 레코드가 레일에서 방금 파괴되었는지 확인 (0) | 2020.10.13 |
| Oracle Database 11g에서 새 스키마 / 새 사용자를 생성하는 방법은 무엇입니까? (0) | 2020.10.13 |
| Lollipop 충돌 전 Android 벡터 드로어 블 사용 (0) | 2020.10.13 |