<main class="main-wrapper">
<h2 class="heading2">Single Select</h2>
<div class="selectbox-container -pulldown">
<label for="selectbox" class="selectbox-label">問い合わせ種別 ：</label>
<select id="selectbox" class="selectbox -single-select" name="subject" required>
<option label="以下から選択してください" selected disabled></option>
<option value="work">仕事のご依頼・ご相談</option>
<option value="activity">運営者の活動について</option>
<option value="about">このサイトについて</option>
<option value="interview">取材</option>
<option value="other">そのほか</option>
</select>
</div>
<div class="divider my32" role="separator"></div>
<h2 class="heading2">Multiple Select</h2>
<div class="selectbox-container">
<label for="selectbox-multi" class="selectbox-label -multi">問い合わせ種別 ：</label>
<select id="selectbox-multi" class="selectbox -multiple-select" name="subject" multiple size="7">
<optgroup label="以下から選択してください">
<option value="work">仕事のご依頼・ご相談</option>
<option value="activity">運営者の活動について</option>
<option value="about">このサイトについて</option>
<option value="interview">取材</option>
<option value="other">そのほか</option>
</optgroup>
<optgroup label="好きな動物">
<option value="work">ペンギン</option>
<option value="activity">コツメカワウソ</option>
<option value="about">フェネック</option>
<option value="about">フクロウ</option>
<option value="about">ゴリラ</option>
</optgroup>
</select>
</div>
</main>
<main class="main-wrapper">
<h2 class="heading2">Single Select</h2>
<div class="selectbox-container -pulldown">
<label for="selectbox" class="selectbox-label">問い合わせ種別 ：</label>
<select id="selectbox" class="selectbox -single-select" name="subject" required>
<option label="以下から選択してください" selected disabled></option>
<option value="work">仕事のご依頼・ご相談</option>
<option value="activity">運営者の活動について</option>
<option value="about">このサイトについて</option>
<option value="interview">取材</option>
<option value="other">そのほか</option>
</select>
</div>
<div class="divider my32" role="separator"></div>
<h2 class="heading2">Multiple Select</h2>
<div class="selectbox-container">
<label for="selectbox-multi" class="selectbox-label -multi">問い合わせ種別 ：</label>
<select id="selectbox-multi" class="selectbox -multiple-select" name="subject" multiple size="7">
<optgroup label="以下から選択してください">
<option value="work">仕事のご依頼・ご相談</option>
<option value="activity">運営者の活動について</option>
<option value="about">このサイトについて</option>
<option value="interview">取材</option>
<option value="other">そのほか</option>
</optgroup>
<optgroup label="好きな動物">
<option value="work">ペンギン</option>
<option value="activity">コツメカワウソ</option>
<option value="about">フェネック</option>
<option value="about">フクロウ</option>
<option value="about">ゴリラ</option>
</optgroup>
</select>
</div>
</main>
/* No context defined. */
.selectbox-container {
position: relative;
width: 75%;
margin: auto;
box-sizing: border-box;
}
@media print, screen and (min-width:64.0625em) {
.selectbox-container {
display: flex;
justify-content: flex-start;
}
}
.selectbox-container.-pulldown:after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-top: 8px #333 solid;
border-right: 6px transparent solid;
border-bottom: 0 transparent solid;
border-left: 6px transparent solid;
border-style: solid;
transition: transform cubic-bezier(.215, .61, .355, 1) .15s, border-color cubic-bezier(.215, .61, .355, 1) .15s;
}
@media print, screen and (min-width:64.0625em) {
.selectbox-container.-pulldown:after {
right: 20px;
bottom: 19.5px;
}
}
@media print, screen and (max-width:64em) {
.selectbox-container.-pulldown:after {
right: 13px;
bottom: 17px;
}
}
.selectbox-label {
width: 25%;
}
@media print, screen and (min-width:64.0625em) {
.selectbox-label {
display: flex;
align-items: center;
margin-bottom: 0;
font-size: calc(var(--font-size-m2));
}
}
@media print, screen and (max-width:64em) {
.selectbox-label {
display: block;
width: 100%;
margin-bottom: .7rem;
}
}
@media print, screen and (min-width:64.0625em) {
.selectbox-label.-multi {
align-items: flex-start;
margin-top: .625rem;
}
}
.selectbox {
display: inline-block;
position: relative;
max-width: 60rem;
margin: auto 1px auto -1px;
border: 1px solid #333;
line-height: 1.2;
box-shadow: 1px 1px 2px 1px hsla(0, 0%, 0%, .15);
}
@media print, screen and (min-width:64.0625em) {
.selectbox {
width: 75%;
padding: .65rem 1rem;
font-size: calc(var(--font-size-m2));
}
.selectbox:focus {
padding: calc(.65rem - 1px) calc(1rem - 1px);
}
}
@media print, screen and (max-width:64em) {
.selectbox {
width: 100%;
padding: .65rem 1.5rem .5rem .8rem;
font-size: calc(var(--font-size-m1) - .1rem);
}
.selectbox:focus {
padding: calc(.65rem - 1px) calc(1.5rem - 1px) calc(.5rem - 1px) calc(.8rem - 1px);
}
}
.selectbox:focus {
border-width: 2px;
}
@media print, screen and (min-width:64.0625em) {
.selectbox.-single-select {
height: 51px;
}
}
@media print, screen and (max-width:64em) {
.selectbox.-single-select {
height: 47.34px;
}
}
No notes defined.