비활성화 된 입력 텍스트 색상

95

아래의 간단한 HTML은 Firefox 및 WebKit 기반 브라우저에서 다르게 표시됩니다 (Safari, Chrome 및 iPhone에서 확인했습니다).

Firefox에서는 테두리와 텍스트의 색상이 같지만 ( #880000) Safari에서는 텍스트가 약간 밝아집니다 (투명도가 적용된 것처럼).

어떻게 든이 문제를 해결할 수 있습니까 (Safari에서이 투명도 제거)?

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

— 덧붙여서
소스

또한 입력의 background-color : white를 입력하면 색상이 다시 올바르게 표시되기 때문에 이것이 버그입니다. 또한 불투명도는 거의 효과가 없습니다. -webkit-text-fill-color : # 880000이 작동하지만

— Miguel

239

-webkit-text-fill-color: #880000;
opacity: 1; /* required on iOS */

— 케모
소스

51

비활성화 된 입력 상자가 일반 입력 상자처럼 보이기를 원했습니다. 이것은 Safari Mobile에서 작동하는 유일한 것입니다. -webkit-text-fill-color : rgba (0, 0, 0, 1); -웹킷 불투명도 : 1; 배경 : 흰색;

— 라이언

11

@Ryan이 맞습니다 1. 모바일 Safari에서는 불투명도를 설정해야합니다 .

— David Jones

7

opacity:1또한 필요합니다.

— Marcel Falliere 2015-08-05

3

불투명도는 여름 2016 년 현재로, 현재 사파리 빌드에 필요하지 않습니다

— 앤디 머서

2

내 하루를 구했습니다! 그러나 요소 의 placeholder텍스트 색상 색상 에도 영향을 미칩니다 input. 경우에 당신은이 링크를 보면, 그것도에 대한 수정이 필요합니다 : css-tricks.com/almanac/selectors/p/placeholder

— Lentyai

43

휴대폰 및 태블릿 웹킷 브라우저 (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 */

— 리진 마
소스

6

그것은 흥미로운 질문이고 나는 그것을 얻을 수 있는지 확인하기 위해 많은 재정의를 시도했지만 아무것도 작동하지 않습니다. 최신 브라우저는 실제로 자체 스타일 시트를 사용하여 요소를 표시하는 방법을 알려주므로 Chrome의 스타일 시트를 살펴보면 어떤 스타일을 적용하는지 알 수 있습니다. 나는 결과에 매우 관심이있을 것이고, 만약 당신이 하나가 없다면 나는 나중에 시간을 낭비 할 시간이있을 때 그것을 찾기 위해 조금 시간을 할애 할 것이다.

참고로,

opacity: 1!important;

재정의하지 않으므로 불투명도가 확실하지 않습니다.

— 스티브 퍼크 스
소스

감사! 설명을 찾을 수 없었고 (Chrome의 사용자 에이전트 스타일 시트에는 그와 같은 것이 없습니다-비활성화 된 입력에 대한 "background-color : rgb (235, 235, 228)"만) 해결 방법을 사용하고 있지만 여전히 무슨 일이 일어나고 있는지 궁금합니다. ...

— 덧붙여서

스티브, 노력 해주셔서 감사 합니다만, 앞으로이 글을 답변이 아닌 댓글로 올리실 것을 제안합니다.

— avernet

6

당신은 색상을 변경할 수있는 #440000사파리 불과하지만, 최고의 솔루션이 될 것 이럴 하지 않는 버튼의 변화 모습 에 모두 . 이렇게하면 모든 플랫폼의 모든 브라우저에서 사용자가 기대하는 것처럼 보입니다.

— Kornel
소스

6

2019 년 업데이트 :

이 페이지의 아이디어를 "설정하고 잊어 버리는"솔루션으로 결합합니다.

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 */
}

— 폴콜.
소스

4

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를 보세요

— Serxipc
소스

고마워요, 이것은 저의 첫 번째 아이디어이기도했지만 초점 때문에 작동하지 않습니다 .iPhone에서는 사용자가 읽기 전용 요소를 탭하면 키보드가 팝업되고 이것은 혼란 스럽습니다. 질문은 오히려 '이론적'입니다-왜 이런 행동이 발생합니까?

— Incidently

흥미로운 해결 방법 : 초점 문제는 특히 스크린 리더를 사용하는 사람들에게 사용성 문제를 야기합니다. 대부분의 경우 사용자가 양식에서 읽기 전용 / 비활성화 된 필드로 탭할 수 없도록하려는 것입니다.

— avernet

4

@ryan 용

비활성화 된 입력 상자가 일반 입력 상자처럼 보이기를 원했습니다. 이것은 Safari Mobile에서 작동하는 유일한 것입니다.

-webkit-text-fill-color: rgba(0, 0, 0, 1);
-webkit-opacity: 1;
background: white;

— vanduc1102
소스

3

모든 장애인 입력에 대해 문제를 해결하려면, 당신은 정의 할 수 있습니다 -webkit-text-fill-color에 currentcolor소위, color입력의 속성이 사용됩니다.

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

Safari https://jsfiddle.net/u549yk87/3/에서 바이올린을 참조하십시오.

— Freez
소스

2

이 질문은 매우 오래되었지만 업데이트 된 웹킷 솔루션을 게시 할 것이라고 생각했습니다. 다음 CSS를 사용하십시오.

input::-webkit-input-placeholder {
  color: #880000;
}

— conceptDawg
소스

3

파이어 폭스를 사용 입력 : -moz-자리

— stephan.com

1

eh .. 이것은 자리 표시 자 속성에 대한 것입니다. 비활성화 된 필드에는 영향을 미치지 않는다고 생각합니다. 아래 @Kemo의 답변 ( -webkit-text-fill-color)은 작동합니다

— philfreo

0

입력 대신 버튼을 사용할 수 있습니까?

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

실제로는 ... 내 실제 응용 프로그램에서 이러한 텍스트 상자는 일반적으로 활성화되고 입력에 사용되며 특정 조건에서만 JavaScript로 비활성화되는 경우 해결 방법을 찾을 수 있습니다 (예 : <input />을 스타일이 지정된 <div> < / div> 'disabled'로 설정하는 대신)-하지만 정말 잘못된 느낌이 듭니다.

— Incidently