Form 요소를 css3로 디자인

Form 요소를 css3로 디자인하면, 입력이나 선택의 조작성・선택의 가독성이 훨씬 높아집니다.
요전날 Form의 코딩을 했으므로, 몇번이나 몇번이나 조사해 써 온 코드를 정리해 보았습니다.

라디오 버튼 및 체크박스

라디오 버튼과 체크 박스는 원, 사각형 및 모든 체크를 before/after 요소로 만듭니다.

contact.html

<!--ラジオボタン-->
<input type="radio" name="01" id="01_01" checked="checked"><label for="01_01">ラジオボタン１</label>
<input type="radio" name="01" id="01_02"><label for="01_02">ラジオボタン２</label>

<!--チェックボックス-->
<input type="checkbox" name="02" id="02_01" checked="checked"><label for="02_01">チェックボックス１</label>
<input type="checkbox" name="02" id="02_02"><label for="02_02">チェックボックス２</label>
<input type="checkbox" name="02" id="02_03"><label for="02_03">チェックボックス３</label>

style.css

input[type=radio] ,
input[type=checkbox] {
    display: none;
}
input + label {
    display: inline-block;
    vertical-align: top;
    padding: 15px 40px;
    margin: 0;
    cursor: pointer;
    position: relative;
}
input + label:before {
    content: '';
    position: absolute;
    display: block;
    border: 1px solid #999;
    background-color: #fff;
}
input[type=radio] + label:before {
    top: 8px;
    left: 0;
    width: 34px;
    height: 34px;
    border-radius: 17px;
}
input[type=checkbox] + label:before {
    content: '';
    position: absolute;
    display: block;
    top: 12px;
    left: 0;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    border: 1px solid #999;
    background-color: #fff;
}
input[type=checkbox]:checked + label:after {
    content: '';
    position: absolute;
    display: block;
    top: 14px;
    left: 8px;
    width: 14px;
    height: 22px;
    border-right: 6px solid #e462d3;
    border-bottom: 6px solid #e462d3;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
input[type=radio]:checked + label:after {
    content: '';
    position: absolute;
    display: block;
    top: 14px;
    left: 6px;
    width: 22px;
    height: 22px;
    border-radius: 11px;
    background-color: #e462d3;
}

풀다운, 텍스트 입력, 텍스트 영역

contact.html

<select name="" id="">
    <option value="">プルダウン</option>
    <option value="aaaaa">プルダウン１</option>
    <option value="bbbbb">プルダウン２</option>
    <option value="ccccc">プルダウン３</option>
</select>

<input type="text" class="input_address" name="" id="" value=""  placeholder="テキスト入力">

<textarea  placeholder="テキストエリアです。"></textarea>

style.css

select,
input[type=text] ,
textarea {
    border-radius: 4px;
    border: 1px solid #999;
    background-color: #fff;
    padding: 10px;
}
input[type=text] {
    width: 100%;
}
input[type=text].input_err {
    border: 1px solid #c44;
    background-color: #fdd;
}

Reference

이 문제에 관하여(Form 요소를 css3로 디자인), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/maki_tanabe/items/f62cee9993ab8d8ccc08

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다