Input 돋보기 - Input dodbogi

모바일 웹을 개발해보면,

iOS에서 input의 테두리나, button의 색상이 내가 설정한대로 적용되지 않는 현상이 나타난다.

# 문제 현상

버튼(input[type=submit])은 그라데이션이 먹고,(그림자도 있는듯?)

입력창도 테두리(border-radius) 등이 정상 작동하지 않는다.

아이폰 사파리 브라우저에 적용된 기본 스타일 때문인데, 쉽게 해결할 수 있다.

# iOS 사파리 기본 스타일 제거 방법

1.  -webkit-appearance 속성을 none으로 설정  해준다.(CSS에 아래와 같이 작성하고 시작.)

2.  -webkit-border-radius 속성을 0으로 설정  해준다.(CSS에 아래와 같이 작성하고 시작.)

input, textarea, button {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
}

혹시 모를 경우를 대비해 위와 같이 작성해주었다.

# 해결 완료

내가 설정대로 input(submit) 버튼이 제대로 나오기 시작한다.

input 입력창의 테두리도 내가 설정한대로 나온다. 성공!

# 참고

appearance 속성은 OS의 테마별 기본 스타일을 설정하는 속성인데,

( platform-native styling, based on the operating system's theme)

-moz-appearance, -webkit-appearance 속성을 통해 브라우저별 기본 스타일을 설정할 수 있는 기능도 지원한다고 한다.

( used by browsers to achieve the same thing)

자세한 사항은 아래 모질라 레퍼런스를 참고하면 좋을듯 하다.

(참고 링크) appearance, -moz-appearance, -webkit-appearance 속성 상세 명세서

developer.mozilla.org/en-US/docs/Web/CSS/appearance

추가: 근데 이렇게 하면 라디오버튼이 안 보이는 이슈가 생길 수 있다.(라디오버튼의 스타일만 appearance: auto 로 주면 된다)

공유하기

게시글 관리

저작자표시 변경금지

• 카카오스토리
• 트위터
• 페이스북

'개발(Development) > HTML, CSS' 카테고리의 다른 글

img 태그의 부모 요소에 "container"라는 클래스를 줬습니다. 여기에 text-align: center;를 하면 inline 요소인 img 태그를 중앙 정렬 할 수 있습니다.

2 & 3. 검색창의 아이콘 정렬과 검색창 커서 부분

<div class="inner">
    <input type="search">
    <div class="searching">
        <i class="fas fa-search"></i>
    </div>
    <div class="icon_ect">
        <i class="fas fa-keyboard"></i>
        <i class="fas fa-microphone"></i>
    </div>
</div>

.inner {
  position: relative;
  width: 600px;
  height: 40px;
  margin: 20px auto;
  border: 1px solid #bdc1c6;
  border-radius: 20px;
}

input {
  width: 90%;
  height: 100%;
  border-color: #bdc1c6;
  border: 0px;
  font-size: 16px;
  outline: none;
}

.searching {
  position: absolute;
  left: 10px;
  top: 20%;
}

i:hover {
  cursor: pointer;
}

.icon_ect {
  position: absolute;
  right: 10px;
  top: 20%;
}

.fa-keyboard {
  margin-right: 10px;
}

먼저 input 태그 중앙 정렬을 고민했다.

저는 위의 1번에서 container라는 클래스에 text-align: center; 를 했는데

text-align의 값은 자식 요소들에게 상속이 된다. 그래서 글 대부분에서 중앙 정렬이 쓰인다면 body 태그에 바로 적용하는 것도 좋은 방법이지 않을까 한다.

처음에는 input 태그에 바로 원하는 만큼의 width와 height 값을 줬지만 검색창의 커서 부분 때문에 input 태그의 부모 요소인 inner 클래스에 width와 height 값을 넉넉하게 주고 input 태그에는 widht 값을 90%, height: 100%;로 해서 inner 클래스 안에 위치하게 했다.

이렇게만 하면 왼쪽으로 정렬이 되어 있을건데 이 때 inner 클래스의 margin의 좌우 값에 auto를 주면 중앙 정렬이 가능해진다.

검색창 구현 관련해서 구글링을 해보니 position에 대한 글들을 많이 봤다. 이처럼 아이콘을 안에 위치하게 하려면 부모 요소에 position: relative;를 하고 해당 아이콘에 position: absolute;를 하는 것에서부터가 시작이다.

이 이후에는 top, right, bottom, left를 적용하여 원하는 위치에 위치시키면 된다.

좌측에 위치시키고자 하면 left와 top(또는 bottom)을 적용하고 반대로 우측일 경우에는 right와 top(또는 bottom)을 적용하시면 원하는 곳에 위치가 가능할 것이다.

그리고 아이콘끼리 간격을 벌리고 싶다면 해당 아이콘(fontawesome을 통한)의 클래스를 불러와서 margin 값을 적용해주면 된다.

4. 검색창 아래의 2개 버튼의 정렬

<div>
    <input type="submit" value="Weegle 검색" class="weegle_inner"></input>
    <input type="submit" value="I'm feeling Lucky" class="weegle_inner"></input>
</div>

.weegle_inner {
  width: 160px;
  height: 40px;
  padding: 10px;
  margin: 10px;
  border-radius: 10px;
  border: 0px;
  vertical-align: middle;
}

.weegle_inner:hover {
  cursor: pointer;
}

2, 3번에서 input 태그에 width(90%)와 height(100%) 값을 지정했어서 여기에서 width와 height 값을 주지 않으면 화면상에 block 요소처럼 한줄씩 차지하는 모습을 볼 수 있다. 이 부분은 width와 height 값을 주면 해결된다.