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

Program / 글쓴이

아래의 간단한 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>

답변

-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사파리 불과하지만, 최고의 솔루션이 될 것 이럴 하지 않는 버튼의 변화 모습 에 모두 . 이렇게하면 모든 플랫폼의 모든 브라우저에서 사용자가 기대하는 것처럼 보입니다.

답변

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

답변

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;