[HTML/CSS] 크롬에서 input에 생기는 파란색 테두리 없애는 방법

티스토리 뷰

오늘도 개발자/HTML5+CSS3

[HTML/CSS] 크롬에서 input에 생기는 파란색 테두리 없애는 방법

오늘도공대생 2019. 1. 5. 05:20

input에 무언가를 입력하려고 커서를 위치시키면 다음처럼 테두리가 생깁니다.

:focus 선택자를 이용해서 없앨 수 있습니다.

1
2
3
input:focus {
  outline: none;
}

iOS에서 input에 생기는 그림자와 둥근 테두리 없애는 방법

iOS에서는 input이 둥근 테두리로 나오고 그림자 효과가 있습니다.

이를 없애는 방법은 다음과 같이 스타일링하는 것입니다.

1
2
3
4
input {
  -webkit-appearance: none;
  border-radius: 0px;
​}

가변폭 검색 폼 만들기

웹브라우저 가로폭이 변할 때 같이 크기가 변하는 가변폭 검색 폼 예제입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      .jbTable {
        display: table;
        width: 100%;
      }
      .jbTableRow {
        display: table-row;
      }
      .jbTableCell {
        display: table-cell;
      }
      .jbText {
        width: 100%;
      }
      .jbSubmit {
        width: 1%;
      }
      .jbText input {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="jbTable">
      <div class="jbTableRow">
        <div class="jbTableCell jbText">
          <input type="text">
        </div>
        <div class="jbTableCell jbSubmit">
          <input type="submit" value="Search">
        </div>
      </div>
    </div>
  </body>
</html>

CSS 초기화

Eric Meyer's CSS Reset

Eric Meyer's CSS Reset입니다. Eric Meyer's CSS Reset은 웹브라우저의 기본 스타일을 전부 없애버립니다.

Normalize.css

normalize.css는 웹브라우저마다 차이나는 부분을 같은 모양으로 나오게 해줍니다.

img 태그가 line-height 영향을 받지 않게 하는 방법

1
img { vertical-align: middle; }

출처 : https://www.codingfactory.net/10694

저작자표시 비영리 변경금지

'오늘도 개발자 > HTML5+CSS3' 카테고리의 다른 글

[HTML/CSS] placeholder의 색, 글자 모양 등 꾸미기 (0)	2019.01.05
[HTML/CSS] 배경 이미지에만 흐림효과(Blur) 적용하기 (0)	2019.01.05
[HTML/CSS] 박스(BOX)에 그림자 적용하기 box-shadow (0)	2019.01.05
[HTML/CSS] 텍스트 마우스 드래그 방지 모든 브라우저 호환용 (0)	2019.01.05
귀여운 로그인 폼 (0)	2018.09.01

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/03 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

글 보관함

티스토리 뷰

[HTML/CSS] 크롬에서 input에 생기는 파란색 테두리 없애는 방법

iOS에서 input에 생기는 그림자와 둥근 테두리 없애는 방법

가변폭 검색 폼 만들기

CSS 초기화

Eric Meyer's CSS Reset

Normalize.css

img 태그가 line-height 영향을 받지 않게 하는 방법

'오늘도 개발자 > HTML5+CSS3' 카테고리의 다른 글

티스토리툴바