선택하면 텍스트 입력의 CSS를 어떻게 변경합니까?

Question

텍스트 상자를 선택하면 <input type="text">의 CSS를 변경하고 싶습니다. 즉 사용자가 텍스트 상자를 클릭하면 다른 CSS 규칙을 적용해야합니다. 순수한 CSS를 사용하여이를 수행 할 수있는 방법이 있습니까?

Answer 1

당신이 초점 의사 클래스를 시도에서

:focus 

대한 추가 정보 : http://reference.sitepoint.com/css/pseudoclass-focus이

Answer 2

예. :focus 가상 클라스를 사용하여 선택하십시오.

데모 http://dabblet.com/gist/1490497

Answer 3

당신은 CSS에서 다음을 사용할 수 있습니다

E :: 선택

여기서 E는 요소입니다.

http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/

는 또한

$('#element').attr('class', 'new value'); 

Answer 4

<script> 
function change(objNum){ 
    var objName = "txtbox"; 
    window.alert(objNum); 

    document.getElementByID(objName).className = "franchlinks"; 

} 
</script> 

<input type="text" class="yourdefaultclass" id="txtbox1" onclick="change('txtbox1');"> 

은 다음과 같이 시도해보십시오 jQuery를 사용할 수 있습니다. 포커스를 잃어 버리면 onclick 대신 onblur를 시도 할 수 있습니다.

Answer 5

은

input[type="text"]:focus{background-color:yellow;} 

어떤 입력 필드 (체크 박스, 파일, 숨겨진, 이미지, 비밀번호, 라디오, 제출, 다시 텍스트)

input:focus{background-color:yellow;} 

를 선택 텍스트의 속성이 입력 필드를 선택 당신이 부드러운 애니메이션 효과를 달성하기 위해 찾고 있다면 어떤 텍스트 영역을하지만 CSS로의

textarea:focus{background-color:yellow;} 

을 선택하고 확인을

포커스/흐림에 대한 더 많은 제어권을가집니다. JQuery 또는 다른 JavaScript 프레임 워크를 사용하는 것이 더 좋습니다.