CSS형태

HTML 형식의 디자인을 크게 CSS로 개선 될 수있다 :

입력 필드 스타일링

사용 width 입력 필드의 폭을 결정하는 속성 :

위의 예는 모든 적용 <input> 요소입니다. 당신은 단지 특정 입력 타입 스타일을 원한다면, 당신은 속성 선택기를 사용할 수 있습니다 :

• input[type=text] - 전용 텍스트 필드를 선택합니다
• input[type=password] - 만 암호 필드를 선택합니다
• input[type=number] - 숫자 만 필드를 선택합니다
• 기타..

패딩 입력

사용 padding 텍스트 필드 내부에 공간을 추가하는 속성입니다.

팁 : 서로 후 많은 입력이있을 때, 당신은 또한 몇 가지 추가 할 수 있습니다 margin 그들 이외의 더 많은 공간을 추가하려면 :

	우리가 설정 한 참고 box-sizing 에 재산 border-box . 이 패딩 결국 테두리 요소의 전체 폭과 높이에 포함되어 있는지 확인합니다. 에 대한 자세한 읽기 box-sizing 우리의 재산 CSS3 상자 크기 조정 장.

경계가 입력

사용 border 테두리 사이즈와 색상을 변경하고, 사용하는 특성을 border-radius 둥근 모서리를 추가 속성 :

당신은 단지 아래쪽 테두리를 원하는 경우, 사용 border-bottom 속성을 :

컬러 입력

사용 background-color 입력에 배경색 및 추가 특성을 color 텍스트 색상을 변경하는 속성 :

집중 입력

그것은 (클릭) 포커스를 얻었을 때 기본적으로 일부 브라우저는 입력 주위에 파란색 1 {을 추가합니다. 당신은 추가하지하여이 문제를 제거 할 수 있습니다 outline: none; 입력에.

사용 :focus 포커스되는 경우 입력 필드와 함께 뭔가를 선택기를 :

아이콘 / 이미지 입력

당신이 입력 내부의 아이콘을 원하는 경우, 사용하는 background-image 속성과 함께 위치 background-position 속성입니다. 또한 우리는 아이콘의 공간을 확보하기 위해 큰 왼쪽 패딩을 추가하는 것을 알 수 :

애니메이션 검색 입력

이 예에서 우리는 CSS3의 사용 transition 이 포커스를 얻었을 검색 입력의 폭을 애니메이션 속성을. 당신은에 대해 자세히 배울 transition 우리에, 나중에 속성을 CSS3 전환 장.

스타일링 텍스트 영역

팁 : 사용하여 resize (오른쪽 아래 모서리에있는 "그래버"를 비활성화) 크기가 조정되는 텍스트 영역을 방지하기 위해 속성을 :

스타일링 선택 메뉴

입력 버튼을 스타일링

CSS로 버튼 스타일을하는 방법에 대한 자세한 내용은, 우리의 읽기 CSS 버튼 자습서 .