마우스 오버시 "제출"입력의 스타일을 지정하려면?

두 개의 서로 다른 입력을 마우스 오버시와 클릭시 다르게 표시하려면 버튼과 마찬가지로 스타일을 지정해야합니다. 보통은 버튼을 사용합니다. 그러나 이들 중 하나는 입력 유형 = "재설정"이며, 양식 재설정 스크립트를 작성하는 것보다 입력을 사용하는 것이 더 간단하다고 가정합니다. 마우스 오버 및 클릭을 위해 CSS에서 "submit"및 "reset"유형으로 입력 스타일을 입력하는 방법은 무엇입니까?마우스 오버시 "제출"입력의 스타일을 지정하려면?

출처

2011-04-22 daysrunaway

오히려 자바 스크립트 방식보다, 당신이 의사 클래스를 사용할 수 있습니다, CSS에서 의미 있다고 가정 :

input[type=reset], /* CSS2.1 attribute-equals selector */ 
#resetButtonID, 
.resetButtonClass-Name { 
    /* the reset button */ 
} 

input[type=reset]:hover, 
#resetButtonID:hover, 
.resetButtonClass-Name:hover { 
    /* the reset button when hovered over */ 
} 

input[type=reset]:active, 
#resetButtonID:active, 
.resetButtonClass-Name:active { 
    /* the reset button when mouse-down */ 
} 

input[type=reset]:focus, 
#resetButtonID:focus, 
.resetButtonClass-Name:focus { 
    /* the reset button when focussed by keyboard-navigation */ 
}

JS Fiddle demo.

출처

2011-04-22 23:24:57

CSS의 다른 요소와 동일합니다. 마우스 오버와 포커스를위한 psuedo 선택기가 있지만 클릭을위한 것은 아닙니다. 또한 속성을 선택 사용할 수 있습니다

input[type="reset"]{/* attribute selector*/} 
input[type="reset"]:hover{/* :hover psuedo selector*/} 
input[type="reset"]:focus{/* :focus psuedo selector*/} 
input[type="reset"]:active{/* :active psuedo selector (for click)*/}

초점 스타일은 사용자가 처음 클릭 할 때 적용 (또는 물론 초점)됩니다,하지만 사용자가 이동하는 다른 요소에 포커스를하면 스타일을 잃게됩니다. 마우스 버튼이 눌려있는 동안 작은 순간에 클릭 스타일을 구체적으로 얻으려면 은을 사용하거나 :active 선택기를 사용해보십시오.이 선택기는 비 앵커 요소에 적용 할 수 있습니다.

출처

2011-04-22 23:23:13

마우스 오버시 "제출"입력의 스타일을 지정하려면?

답변

관련 문제