NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


input type=”search” in Webkit Browser.

본문 건너 뛰기

SNS를 사용하다 보니 왠만한 글은 짧게 압축해서 간단하게 쓰는 버릇이 생겼습니다. 대신 블로깅은 뒷전이 됐구요. 오늘은 놀고 있는 블로그에 미안한 생각이 들어서 앞으로 가급적 짧은 내용이라도 블로그에 적어야겠다는 생각을 했습니다.

웹킷 엔진을 사용하는 크롬과 사파리 브라우저는 <input type=”search”  /> 요소를 다른 브라우저와 다르게 표시하는 특징(또는 버그)이 있습니다. search 타입은 HTML5 문서에서 새로 등장한 속성입니다.

보통의 경우 input 요소에 적용되어 있는 브라우저의 기본 CSS는 웹 제작자의 CSS 코드를 이용하여 덮어 쓸 수 있는데요. 크롬과 사파리 브라우저는 유독 <input type=”search”  /> 요소에 border 속성을 덮어쓰지 않도록 처리를 해 놨습니다. 원인을 찾다가 보니 크롬 브라우저에서 다음과 같은 코드가 UA(User Agent) 스타일시트 안에 포함되어 있더라구요.

input[type=”search”] {
-webkit-appearance:searchfield;
box-sizing:border-box;
}

다른 타입의 input은 이렇지 않은데요. 유난히 search 타입만 이렇습니다.

  • -webkit-appearance:searchfield; 라는 코드는 웹 제작자가 검색 input에 대한 border 속성을 덮어 쓸 수 없도록 만듭니다.
  • box-sizing:border-box; 속성은 다른 일반적인 박스와 다르게 패딩과 보더를 너비값에 포함시켜 버리는 방식으로 면적(너비와 높이)을 계산합니다.

결국 웹 제작자는 검색 인풋을 의도한 대로 디자인 하기 어렵고 다른 브라우저와 다른 면적 계산 방식 때문에 당황하게 됩니다. 다른 input 요소와 동일한 방법으로 검색 input에 border 속성을 제공하고 일반적인 면적 계산 방식을 가질 수 있도록 하려면 웹 제작자는 다음과 같은 코드를 사용해서 UA 스타일을 덮어쓰기 할 수 있습니다.

input[type=”search”] {
-webkit-appearance:textfield;
box-sizing:content-box;
}

끝입니다. 웹킷 개발자는 어떤 의도로 이렇게 처리를 해놓은 것일까요?

분류: CSS,웹 디자인,웹 표준 | 2012년 5월 10일, 22:27 | 정찬명 | 댓글: 6개 |
트랙백URI - http://naradesign.net/wp/2012/05/10/1780/trackback/

6개의 댓글이 있습니다.

  1. 조경수 댓글:

    정찬명님 질문하남나 할께요;
    모바일 안드로이드 계열에서
    input[type=”password”] 의 :focus 상태일때 기존적으로 먹히는
    border(?) or outline(?) 값과 background-color 속성을 컨트롤할수는없나요?
    포커스될때 기존적으로 먹히는속성을 좀 풀어주고 싶은데 해결이 안되네요 ㅠ

  2. 조경수 댓글:

    에고 오타작렬이네요-_-;; 죄송합니다..

  3. 정찬명 댓글:

    @조경수
    스텍 오버플로우에 이와 관련된 답변이 있네요. 한번 시도해 보세요.
    http://stackoverflow.com/questions/8883255/android-2-3-4-html-input-type-password-has-border-on-focus

    input[type=password]:focus{ -webkit-user-modify:read-write-plaintext-only }

  4. 조경수 댓글:

    정찬명님 답변감사합니다..
    코멘트 주셨던 것처럼 chrome 개발자도구에서 focus 상태엘때 css속성은 제대로
    적용되는것같은데..
    android 에서는 제대로 제거가 되지가 않아요;(펌웨어버전2.3.5 입니다)

  5. 정찬명 댓글:

    @조경수
    제가 안드로이드폰이 없어서 그 이상은 잘 모르겠네요. 구글에서 검색해보세요. ^^

  6. I'm Sure 댓글:

    input type=’text’ 의 경우 box-sizing 이 기본으로 content-box 가 되어있는 줄을 모르고, 한참 고생했는데 우연히 여기서 답을 얻고 가네요. 감사합니다.

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님