radioを使って作られたドロップダウンのメニューです。メニューの項目はすべてradioなので、一つだけ選ぶことができます。「希望の営業所を選んでください」をクリックすると、メニューを閉じます。矢印アイコンは下向きに変わります。ページロードの際の初期値は、メニューを開いた状態ですが、初期値を閉じた状態にするには、htmlの<details open>
の"open
(赤文字部分)"を外します。
<fieldset>
<legend>ドロップダウンのメニュー</legend>
<details open>
<summary>希望の営業所を選んでください<span class="material-icons-round">arrow_drop_down</span></summary>
<div>
<label>
<input type="radio" name="radio" checked/>
<span>東京営業所</span>
</label>
<label>
<input type="radio" name="radio"/>
<span>北海道営業所</span>
</label>
<label>
<input type="radio" name="radio"/>
<span>名古屋営業所</span>
</label>
<label>
<input type="radio" name="radio"/>
<span>京都営業所</span>
</label>
<label>
<input type="radio" name="radio"/>
<span>大阪営業所</span>
</label>
<label>
<input type="radio" name="radio"/>
<span>福岡営業所</span>
</label>
</div>
</details>
</fieldset>
*,
*:after,
*:before {
box-sizing: border-box;
}
fieldset {
margin-left: auto;
margin-right: auto;
margin-top: 5rem;
margin-bottom: 5rem;
max-width: 400px;
width: 90%;
}
legend {
padding-top: 1.5rem;
margin-bottom: 0.5rem;
font-size:1rem;
}
details {
position: relative;
}
details summary {
background-color: #fff;
border: 2px solid #b5bfd9;
padding: 0.75rem 0.75rem;
position: relative;
border-radius: 8px;
padding-right: 3rem;
cursor: pointer;
list-style: none;
}
details summary::-webkit-details-marker {
display: none;
}
details summary:focus {
outline: 0;
box-shadow: 0 0 0 4px #b5c9fc;
}
details summary:hover, details summary:focus {
border-color: #2260ff;
}
details summary span {
position: absolute;
top: 50%;
right: 0.75rem;
transform: translateY(-50%);
transform-origin: center center;
}
details[open] summary {
border-color: #2260ff;
box-shadow: 0 0 0 4px #b5c9fc;
}
details[open] summary span {
transform: scaleY(-1) translateY(50%);
}
details div {
margin-top: 8px;
background-color: #fff;
border: 2px solid #b5bfd9;
border-radius: 8px;
display: flex;
flex-direction: column;
padding: 0.5rem;
box-shadow: 0 3px 7px 0 #c8cfe1;
}
details div label {
position: relative;
cursor: pointer;
}
details div input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
visibility: hidden;
position: absolute;
}
details div input:checked + span {
background-color: #e9efff;
color: #2260ff;
}
details div span:hover {
background-color: #e9efff;
}
details div span {
display: block;
padding: 0.625rem;
border-radius: 8px;
margin-top: 0.25rem;
}