아무래도 7note입니다. iPhone 등에서 나오는 디폴트의 폼계 태그의 CSS를 무효화하고 한편의 CSS안을 생각합니다

iOS 단말에서는 폼계 태그인 input이나 button의 표시로 디폴트의 CSS가 들어 버리기 때문에, 디자인이 이마이치가 되어 버립니다.

· ios 터미널의 기본 선택 상자와 버튼


이것의 CSS를 무효화해 한층 더 오리지날의 CSS를 대고 갑니다.

ios 터미널의 양식 시스템 CSS를 비활성화하는 방법

style.css

/* 何もかも無効にしたい場合 */
input,select{
  -webkit-appearance: none;
  border: none;
}

/* ボタン系だけ無効化したい場合 */
input[type="submit"],
input[type="button"] {
  -webkit-appearance: none;
}

/* ラジオボタンやチェックボックスを無効化（正確には非表示）*/
input[type="radio"],
input[type="checkbox"] {
  display: none;  /* これだけ対策方法がちょっと違います */
}

이제 비활성화할 수 있습니다.
다음은 대체 CSS를 넣습니다.
PC의 Google Chrome에서 본 경우에 가까운 CSS를 넣어 봅시다.

무효화 후 변경되는 CSS 예

index.html

<input type="submit">

<div class="selectBox">
  <select name="" id="">
    <option value="">選択してください</option>
  </select>
</div>

style.css

input[type="submit"],
input[type="button"] {
    color: #fff;
    background-color: #2D9D53;
}

.selectBox {
    display: inline-block;
    border: 1px solid #000;
    border-radius: 5px;
    position: relative;
    padding-right: 15px;
}
.selectBox::before {
    content: "";
    width: 5px;
    height: 5px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    display: inline-block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10px;
    margin: auto;
    transform: rotate(45deg);
}

요약

iPhone은 엄청 보급률이 높은데, 이런 가려운 곳에 손이 닿지 않는 것이 난점.
iPhone을 위해서만 불필요한 CSS가 늘어나는 것은 소스를 관리하는 측으로서는 힘들지만, iPhone에서 보는 사람이 많기 때문에 시대의 파도에는 반대할 수 없습니다.

그 시대에 맞춘 코딩 방법을 항상 실천해 나가는 것이 중요하네요. 오늘의 배움입니다.

어머니!

~ Qiita에서 매일 게시 중!! ~
【초보자용】WEB 제작의 조금 테크 모임