Main menu

Bootstrap 3 강좌 | Tips > input 폼의 그림자 없애는 방법

Bootstrap으로 사이트를 디자인할 때, input 요소에 form-control 클래스를 추가하면 깔끔한 입력 폼이 만들어 집니다.

간단한 예는 다음과 같습니다.

<h1>Input</h1>
<input type="text" class="form-control">

그런데, 이 폼에는 그림자 효과가 적용되어 있습니다.

PC에서는 잘 보이지 않을 수도 있지만, 아이패드 같은 고해상도 디스플레이로 보면 확연히 나옵니다.

이 그림자를 없애고 싶다면 스타일에 다음의 코드를 추가하면 됩니다.

.form-control {
  -webkit-appearance: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
​}

이 글을 공유하기

Kakao