iOS에서 입력 텍스트 색상 사용 안 함
아래의 간단한 HTML은 Firefox와 WebKit 기반 브라우저에서 다르게 표시됩니다(Safari, Chrome, iPhone에서 확인했습니다).
Firefox에서 테두리와 텍스트는 모두 동일한 색상입니다.#880000하지만 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 */
전화 및 Tablet 웹킷 브라우저(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 */
2021년 업데이트:
이 페이지의 아이디어를 "설정 후 잊어버림" 재설정으로 결합하여 비활성화된 모든 텍스트를 일반 텍스트와 동일하게 만듭니다.
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 */
}
그것은 흥미로운 질문이고 저는 제가 그것을 진행시킬 수 있는지 보기 위해 많은 오버라이드를 시도했지만, 아무것도 작동하지 않습니다.현대 브라우저는 실제로 자체 스타일시트를 사용하여 요소를 표시하는 방법을 알려주기 때문에 Chrome의 스타일시트를 냄새로 확인하면 어떤 스타일을 적용하는지 알 수 있습니다.저는 그 결과에 매우 관심이 있을 것이고 만약 당신이 그것을 가지고 있지 않다면 저는 나중에 제가 시간을 낭비할 때 그것을 찾는 데 약간의 시간을 쓸 것입니다.
참고로,
opacity: 1!important;
그것을 무시하지 않기 때문에 불투명한 것인지 확신할 수 없습니다.
다음으로 색상을 변경할 수 있습니다.#440000단지 사파리를 위한 것이지만, IMHO의 가장 좋은 해결책은 버튼의 모양을 전혀 바꾸지 않는 것입니다.이렇게 하면 모든 플랫폼의 모든 브라우저에서 사용자가 예상하는 것과 똑같이 보입니다.
@일주일 동안
비활성화된 입력 상자를 일반 입력 상자처럼 만들고 싶었습니다.이것은 Safari Mobile에서 작동하는 유일한 것입니다.
-webkit-text-fill-color: rgba(0, 0, 0, 1);
-webkit-opacity: 1;
background: white;
비활성화된 특성 대신 읽기 전용 특성을 사용할 수 있지만 유사 클래스 입력인 읽기 전용이 없기 때문에 클래스를 추가해야 합니다.
<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 을 보세요.
비활성화된 모든 입력에 대한 문제를 해결하려면 다음을 정의할 수 있습니다.-webkit-text-fill-color로.currentcolor그래서color입력의 속성이 사용됩니다.
input[disabled] {
-webkit-text-fill-color: currentcolor;
}
Safari https://jsfiddle.net/u549yk87/3/ 에서 바이올린을 확인하십시오.
이 질문은 매우 오래되었지만 업데이트된 웹킷 솔루션을 게시해야겠다고 생각했습니다.다음 CSS를 사용하면 됩니다.
input::-webkit-input-placeholder {
color: #880000;
}
당신은 입력 대신 버튼을 사용할 수 있습니까?
<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-on-ios
'itsource' 카테고리의 다른 글
| 다운타임 없이 ASP.NET 애플리케이션을 배포하는 방법 (0) | 2023.06.01 |
|---|---|
| 텍스트/입력 상자 주변의 포커스 테두리(아웃라인)를 제거하는 방법은 무엇입니까?(크롬) (0) | 2023.06.01 |
| wpf 데이터 그리드에 상황에 맞는 메뉴를 추가하는 방법은 무엇입니까? (0) | 2023.06.01 |
| 문자열을 정규식으로 보간 (0) | 2023.06.01 |
| Azure 함수 앱에서 큐 트리거를 위한 큐 이름 구성 방법 (0) | 2023.06.01 |