CSS Forms

Input Fields 꾸미기

width 속성을 써서 input field의 너비를 결정할 수 있다.

input {
    width: 100%;
}

위 예는 모든 <input> 요소에 적용된다. 특정한 input type만 꾸미고 싶다면 속성 선택자를 쓸 수 있다.

input[type=text]

input[type=password]

input[type=number]

Padded Inputs

text field 안에 padding 속성을 써서 공간을 추가한다.

input이 많이 있다면 margin을 써서 서로 간의 간격을 띄울 수 있다.

예시

box-sizing의 값은 border-box이다. padding과 border가 요소의 전체 너비와 높이 안에 포함된다.

Bordered Inputs

border size와 색을 바꾸기 위해 border 속성을 쓴다. border-radius 속성을 써서 둥근 모서리를 추가한다.

예시

바닥에만 색을 주고 싶다면 border-bottom 속성을 쓴다.

Colored Inputs

input에 배경색을 추가하기 위해 background-color 속성을 사용한다. color로 글자 색을 바꾼다.

input[type=text] {
    background-color: #3CBC8D;
    color: white;
}

예시

Focused Inputs

기본적으로, 몇몇 브라우저들에서는 input을 클릭할 때 input 주변에 파란색 outline이 추가된다. outline:none;을 추가해서 파란색 outline을 없앨 수 있다.

:focus 선택자를 써서 input을 클릭했을 때 뭔가를 할 수 있다.

input 클릭 시 배경색 변경

input 클릭 시 border 색 변경

Input with icon/image

input 안에 아이콘을 넣고 싶다면 background-image 속성을 쓰고 background-position 속성으로 위치를 잡을 수 있다. 아이콘이 들어갈 공간을 줘야하기 때문에 왼쪽에 padding을 추가해야 한다.

예시

Animated Search Input

input을 클릭할 때 너비가 움직이게 하기 위해 transition 속성을 쓴다.

예시

높이 변화를 주려면 input에 height 설정을 하고 input:focus에서도 클릭되었을 때의 원하는 만큼의 height를 지정해야 한다.

Styling Textareas

resize 속성을 써서 우측 하단에 있는 크기 조절(grabber) 기능을 못 쓰게 한다.

예시

Styling Select Menus

예시

outline:none;까지 해주면 더 깔끔한 것 같다.

select 말고 option에도 당연히 배경, 패딩 등의 속성 지정을 할 수 있다.

Styling Input Buttons

input의 type에 따라 button, submit, reset, text 등이 올 수 있다. type 속성의 값을 지정해서 꾸민다.

예시

Responsive Form

스크린 너비가 600px 미만일 때 2개의 열이 양 옆에 있지 않고 쌓이게 만든다.

예시

row 안에 col 2개가 있는데 너비가 600px 미만이 되면 width가 100%로 변한다. 그래서 나란히 있지 못하고 쌓이게 된다.

float 속성이 적용된 col의 부모인 row에 float을 적용하지 않기 위해 row에 가상 클래스를 만들어 clear fix한다.

display:table 대신 display:block을 써도 된다.

https://www.w3schools.com/css/css_form.asp