입력 입력 상자는 웹 페이지의 필수 구성 요소이지만 각 브라우저에는 입력 상자의 디스플레이 스타일이 다릅니다.
예를 들어:
위의 그림은 Google Chrome 및 IE 브라우저와 함께 제공되는 입력 상자이며 스타일은 만족스럽지 않으므로 대부분 스타일 자체를 작성합니다.
여기 간단한 텍스트 상자 스타일이 있습니다
입력 {테두리 : 1px 고체 #ccc; 패딩 : 7px 0px; Border-Radius : 3px; / *CSS3 속성 IE는 지원하지 않습니다 */ Padding-left : 5px; } 생식 이미지 :
스타일 속성 의미 :
국경 : 1px Solid #CCC; /*입력 상자 테두리, 색상, 크기 및 에지 선의 단단한 점선을 설정*/
패딩 : 7px 0px; /* 입력 상자의 높이를 설정하면 높이를 사용할 수도 있지만 높이를 사용하면 입력 상자의 커서가 상단에 놓이고 다른 스타일을 고정해야하며 호환되지 않을 수 있습니다.
Border-Radius : 3px; / *CSS3 내부의 속성 석재는 지원하지 않습니다 */
왼쪽 패딩 : 5px; /*광고가 왼쪽에서 5 픽셀로 떨어지고 처음에는 커서가 왼쪽 입력 상자의 가장자리에 부착됩니다*/
기본적으로 위의 스타일은 요즘 더 일반적으로 사용되며 다른 입력 설정
예를 들어 : 속성 자리 표시 자
이 속성은 입력 상자에 신속한 텍스트 효과가 있습니다. CSS3 속성은 IE를 지원하지 않습니다
입력 특수 효과를 빛나기 위해 클릭하십시오.
입력 {테두리 : 1px 고체 #ccc; 패딩 : 7px 0px; Border-Radius : 3px; 왼쪽 패딩 : 5px; -webkit-box-shadow : inset 0 1px 1px rgba (0,0,0, .075); Box-Shadow : inset 0 1px 1px rgba (0,0,0, .075); -webkit-transition : Border-Color Ease-in-out.15s, -webkit-box-shadow Ease-in-out.15s; -o-ransition : 국경 색상의 편안함-인 아웃. 전환 : 국경 색상의 편안함 .15S, Box-Shadow ease-in-out .15S} 입력 : Focus {Border-Color : #66afe9; 개요 : 0; -webkit-box-shadow : 삽입 0 1px 1px rgba (0,0,0, .075), 0 0 8px rgba (102,175,233, .6); Box-Shadow : 삽입 0 1px 1px rgba (0,0,0, .075), 0 8px rgba (102,175,233, .6)} 생식 이미지 :