【지금부터 종사한다】Sass로 간단 form의 css(checkbox·radio·select)
▼오늘, 작성하는 것
・라디오 버튼
· 체크 박스
・셀렉트 박스
form.html
<dl class="form-area">
<dt>ラジオボタン</dt>
<dd>
<label class="label-radio"><input class="form-radio" type="radio" name="radio1">ラジオ01</label>
<label class="label-radio"><input class="form-radio" type="radio" name="radio1">ラジオ02</label>
</dd>
<dt>ラジオボタン</dt>
<dd>
<label class="label-radio"><input class="form-radio" type="radio" name="radio2">ラジオ01</label>
<label class="label-radio"><input class="form-radio" type="radio" name="radio2">ラジオ02</label>
</dd>
<dt>チェックボックス</dt>
<dd>
<label class="label-checkbox"><input class="form-checkbox" type="checkbox" name="">ラジオ01</label>
<label class="label-checkbox"><input class="form-checkbox" type="checkbox" name="">ラジオ02</label>
</dd>
<dt>セレクトボックス</dt>
<dd>
<div class="form-select-area">
<select class="form-select" required>
<option value="" hidden>選択してください</option>
<option value="1">項目1</option>
<option value="2">項目2</option>
<option value="3">項目3</option>
<option value="4">項目4</option>
</select>
</div>
</dd>
</dl>
form.scss
/**
* メディアクエリ
*/
$mq: 768px;
@mixin mq {
@media (max-width: ($mq)) {
@content;
}
}
.form-area {
display: flex;
flex-wrap: wrap;
> *:nth-child(odd) {
width: 20%;
margin-bottom: 1em;
@include mq {
width: 100%;
}
}
> *:nth-child(even) {
width: 80%;
margin-bottom: 1em;
@include mq {
width: 100%;
}
}
}
form-check.scss
/* checkbox */
$input-color: blue;
.form-checkbox {
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
margin-right: 5px;
width: 15px;
height: 20px;
cursor: pointer;
transition: all 0.15s ease-out 0s;
color: #fff;
border: none;
outline: none;
appearance: none;
&::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 15px;
height: 15px;
border: 1px solid #999;
}
&:checked::after {
content: "";
display: block;
position: absolute;
top: 3px;
left: 3px;
width: 11px;
height: 11px;
background: $input-color;
}
}
.label-checkbox+.label-checkbox {
margin-left: 16px;
}
form-radio.scss
/* radio */
$input-color: blue;
.form-radio {
@extend .form-checkbox;
&::before {
border-radius: 50%;
}
&:checked::after {
border-radius: 50%;
}
}
.label-radio+.label-radio {
margin-left: 16px;
}
form-select.scss
/* select */
$input-color: blue;
.form-select-area {
width: 200px;
position: relative;
border: 1px solid #bbbbbb;
border-radius: 2px;
background: #ffffff;
&::before {
content: '';
position: absolute;
top: 0.8em;
right: 0.9em;
width: 0;
height: 0;
padding: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #666666;
pointer-events: none;
}
.form-select {
width: 100%;
padding-right: 1em;
cursor: pointer;
text-indent: 0.01px;
text-overflow: ellipsis;
border: none;
outline: none;
background: transparent;
background-image: none;
box-shadow: none;
appearance: none;
padding: 8px 38px 8px 8px;
color: #666666;
&::-ms-expand {
display: none;
}
}
}
Reference
이 문제에 관하여(【지금부터 종사한다】Sass로 간단 form의 css(checkbox·radio·select)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/abeno/items/edfdc3122834a3ebb4f6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)