CSS를 사용하여 IE8에서 비활성화 된 HTML 컨트롤의 색상을 변경하는 방법

CSS를 사용하여 IE8에서 비활성화 된 HTML 컨트롤의 색상을 변경하는 방법

---

다음 CSS를 사용하여 비활성화 된 입력 컨트롤의 색상을 변경하려고합니다.

input[disabled='disabled']{
  color: #666;     
}

이것은 대부분의 브라우저에서 작동하지만 IE에서는 작동하지 않습니다. 배경색, 테두리 색상 등과 같은 다른 스타일 속성을 변경할 수 있습니다. 누구든지 이것을 설명 할 수 있습니까?

---

안타깝게도 disabled 속성을 사용하면 IE는 텍스트 색상을 이상한 흰색 그림자와 함께 회색으로 기본 설정하지만 다른 모든 스타일은 여전히 ​​작동합니다. :-/

---

IE10의<select> 요소에 대해 동일한 문제가 있었고 선택한 요소에만 작동하는 솔루션을 찾았습니다.

http://jsbin.com/ujapog/7/

텍스트 색상을 수정할 수있는 Microsoft 의사 요소가 있습니다.

select[disabled='disabled']::-ms-value {
    color: #000;
}

규칙은 자체적으로 있어야합니다. 그렇지 않으면 다른 브라우저가 구문 오류로 인해 전체 규칙을 무시하기 때문입니다. 다른 Internet Explorer 전용 의사 요소는 http://msdn.microsoft.com/en-us/library/ie/hh869604(v=vs.85).aspx 를 참조 하십시오 .

편집 : 규칙이 있어야한다고 생각 select[disabled]::-ms-value하지만 시도 할 이전 IE 버전이 없습니다.이 단락을 다시 편집하거나 개선 된 경우 주석을 추가하십시오.

---

disable = "disable"속성에 대한 스타일을 재정의 할 수있는 방법은 없습니다. 이 문제를 해결하기위한 해결 방법은 다음과 같습니다. 제 경우에는 제출 버튼 만 선택합니다.

if ($.browser.msie) {
    $("input[type='submit'][disabled='disabled']").each(function() {
        $(this).removeAttr("disabled");
        $(this).attr("onclick", "javascript:return false;");
    });
}

사용 가능한 예 : http://jsfiddle.net/0dr3jyLp/

---

텍스트 영역이 "사용 안함"으로 글꼴 색상을 회색으로 변경하는 것과 동일한 문제가 발생했습니다. css 아래 텍스트 영역에 "disabled"속성 대신 "readonly"속성을 사용하여 해결 방법을 수행했습니다.

textarea[readonly] {
border:none; //for optional look
background-color:#000000; //Desired Background color        
color:#ffffff;// Desired text color
}

그것은 나에게 매력처럼 작동했다 !!, 그래서 나는 코드의 다른 부분을 변경하지 않고 "disabled"를 "readonly"로 바꾸기가 쉽기 때문에 다른 해결책보다 먼저 이것을 시도하는 것이 좋습니다.

---

이 주제를 만든 지 오랜만이라는 것을 알고 있지만이 해결 방법을 만들었습니다. (IE 9 사용)

유일한 결과는 입력 값을 선택할 수 없다는 것입니다.

자바 스크립트 사용 :

    if (input.addEventListener)
            input.addEventListener('focus', function(){input.blur()}, true)
    if (input.attachEvent)
            input.attachEvent("onfocus", function(){input.blur()})

---

방금 전체 배경을 밝은 회색으로 만들었습니다. 상자가 비활성화되었음을 더 쉽고 빠르게 전달하는 것 같습니다.

input[disabled]{
  background: #D4D4D4;     
}

---

IE에서 컨트롤을 "비활성화"하는 문제를 해결 한 방법은 입력 컨트롤이 유형 = 확인란 인 추악한 회색이없는 상태로 유지하고 onclick 이벤트에서 약간의 자바 스크립트를 사용하여 변경을 방지하는 것입니다.

onclick='this.checked == true ? this.checked = false : this.checked = true;'

---

Wayne이 언급했듯이 3 년이 지난 후에도 IE9에서는 운이 좋지 않지만 ...

opacityCSS 사용을 낮추면 더 읽기 쉽고 전체 비활성화 상태에 도움이됩니다.

---

이 문제에 대해 찾은 해결책입니다.

// IE 인 경우

inputElement.writeAttribute ( "unselectable", "on");

// 기타 브라우저

inputElement.writeAttribute ( "disabled", "disabled");

이 트릭을 사용하면 편집 할 수없는 입력 상자의 IE 및 기타 브라우저에서 작동하는 입력 요소에 스타일 시트를 추가 할 수 있습니다.

---

user1733926과 Hamid의 솔루션을 혼합하고 IE8에 대한 효과적인 코드를 찾았습니다. 즉, 9/10에서도 작동하는지 알면 좋을 것입니다 (?).

<script type="text/javascript">
if ($.browser.msie) {
    $("*[disabled='disabled']").each(function() {
        $(this).removeAttr("disabled");
        $(this).attr("unselectable", "on");
    });
}
</script>

---

이 게시물을 읽은 후 비활성화 된 입력 상자와 유사하게 작동하지만 "읽기 전용"인 입력을 만들기로 결정했습니다.

그래서 저는 그것을 선택하거나 탭할 수 없거나 사용자가 값을 변경하거나 선택할 수 있다는 생각을주는 마우스 커서를 갖지 못하도록 만들었습니다.

IE8 / 9, Mozzila 18, Chrome 29에서 테스트 됨

<input name="UserName" class="accountInputDisabled" id="UserName" type="text" readOnly="readonly" value="" unselectable="on" tabindex="-1" onselectstart="return false;" ondragstart="return false;" onmousedown='return false;'/>


input.accountInputDisabled {
    border: 1px solid #BABABA !important;
    background-color: #E5E5E5 !important;    
    color: #000000;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -moz-user-input: disabled;
    -ms-user-select: none;
    cursor:not-allowed;
}

input:focus {
    outline: none;
}          

---

CSS 사용 클래스 기반 접근 방식을 재정의 할 필요가 없으며 이벤트와 함께 완벽하게 작동합니다.

다음 중 한 가지를 수행 할 수 있습니다.

<button class="disabled" onmousedown="return checkDisable();">

function checkDisable() {
 if ($(this).hasClass('disabled')) { return false; }
 }

http://navneetnagpal.wordpress.com/2013/09/26/ie-button-text-shadow-issue-in-case-of-disabled/

---

비활성화 된 속성을 제거 하고 읽기 전용 속성을 사용 합니다. 필요한 결과를 얻기 위해 필요한 CSS를 작성합니다. 이것은 IE8 및 IE9에서 작동합니다.

for e.g., for dark grey,

 input[readonly]{
   color: #333333;     
 }

---

Please check this CSS code.

input[type='button']:disabled, button:disabled
 {
    color:#933;
    text-decoration:underline;
}

or check this URL. http://jsfiddle.net/kheema/uK8cL/13/

---

The problem is solved in IE11. If the problem still persists in IE11, check for the rendering engine IE is using.

---

I came across this piece of code at stackoverflow which helped me take off disable css class using javascript.

$("#textboxtest").prop("disabled", false).removeClass("k-state-disabled");

Original thread can be found at Applying k-state-disabled class to text inputs - Kendo UI Thought I should share!

---

Use this css, works for IE11:

input[disabled="disabled"], select[disabled="disabled"], textarea[disabled="disabled"] {
    opacity:0.99 !important;
    background:black;
    text-shadow:inherit;
    background-color:white;
    color:black
}

참고URL : https://stackoverflow.com/questions/1411044/how-to-change-color-of-disabled-html-controls-in-ie8-using-css