CSS 폼

input 필드 스타일링

width 속성을 사용하여 입력 필드의 너비를 결정합니다.

예제 1
input {
  width: 100%;
}

위의 예는 모든 <입력> 요소에 적용됩니다. 특정 입력 유형만 스타일링하려는 경우 속성 셀렉터를 사용할 수 있습니다.

  • input[type=text] - 텍스트 필드만 선택합니다.
  • input[type=password] - 비밀번호 필드만 선택합니다.
  • input[type=number] - 숫자 필드만 선택합니다.
  • 등등

패딩 input

텍스트 필드 내부에 공백을 추가하려면 padding 속성을 사용하십시오.

Tip: 입력 내용이 여러 개일 경우 margin을 추가하여 입력 내용 외부에 공간을 더 추가할 수도 있습니다.

예제 2
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

box-sizing 속성을 border-box로 설정했습니다. 이렇게 하면 요소의 총 너비와 높이에 패딩과 테두리가 포함됩니다.

input 테두리

border 속성을 사용하여 테두리 크기와 색상을 변경하고 border-radius 속성을 사용하여 둥근 모서리를 추가합니다.

예제 3
input[type=text] {
  border: 2px solid red;
  border-radius: 4px;
}

아래쪽 테두리만 원하는 경우 border-bottom 속성을 사용하십시오.

예제 4
input[type=text] {
  border: none;
  border-bottom: 2px solid red;
}

input 색상

background-color 속성을 사용하여 입력에 배경색을 추가하고 color 속성을 사용하여 텍스트 색상을 변경합니다.

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

input 포커스

기본적으로 일부 브라우저는 포커스가 설정되면 입력 주위에 파란색 윤곽선을 추가합니다. outline: none;을 추가하여 이 동작을 제거할 수 있습니다.

:focus 셀렉터 사용하여 포커스가 지정될 때 입력 필드에 대해 작업을 수행합니다.

예제 6
input[type=text]:focus {
  background-color: lightblue;
}
예제 7
input[type=text]:focus {
  border: 3px solid #555;
}

icon/image을 포함한 input

input 내부에 아이콘을 원하는 경우 background-image 속성을 사용하고 background-position 속성과 함께 배치합니다. 또한 큰 왼쪽 패딩을 추가하여 아이콘의 공간을 지정합니다.

예제 8
input[type=text] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding-left: 40px;
}

검색 input 애니메이션

이 예에서는 CSS transition 속성을 사용하여 검색 입력이 포커스가 될 때 그 너비를 애니메이션화합니다.

예제 9
input[type=text] {
  transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
  width: 100%;
}

textarea 스타일링

resize 속성을 사용하여 텍스트 영역의 크기가 조정되지 않도록 합니다(오른쪽 아래 모서리의 “grabber” 사용 안 함).

예제 10
textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}

select 메뉴 스타일링

예제 11
select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

input 버튼 스타일링

예제 12
input[type=button], input[type=submit], input[type=reset] {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

반응형 form

스크린의 폭이 600px보다 작을 경우, 두 이 서로 옆에 있는 대신 위에 쌓이게 합니다.

예제 13
<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* 열 뒤의 float 지우기 */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* 반응형 레이아웃 - 화면 너비가 600px 미만인 경우 두 기둥이 서로 나란히 있는 대신 위에 쌓이게 합니다. */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}
</style>
</head>
<body>

<h2>Responsive Form</h2>
<p>Resize the browser window to see the effect. When the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other.</p>

<div class="container">
  <form action="/action_page.php">
  <div class="row">
    <div class="col-25">
      <label for="fname">First Name</label>
    </div>
    <div class="col-75">
      <input type="text" id="fname" name="firstname" placeholder="Your name..">
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="lname">Last Name</label>
    </div>
    <div class="col-75">
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="country">Country</label>
    </div>
    <div class="col-75">
      <select id="country" name="country">
        <option value="australia">Australia</option>
        <option value="canada">Canada</option>
        <option value="usa">USA</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="subject">Subject</label>
    </div>
    <div class="col-75">
      <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
    </div>
  </div>
  <br>
  <div class="row">
    <input type="submit" value="Submit">
  </div>
  </form>
</div>

</body>
</html>