僅基本CSS解決方案（JS是注入CSS而不需要滾動(dòng)其中一個(gè)框）
document.querySelector( 'style' ).innerHTML += `
html {
color: #222;
font-family: Arial;
text-transform: capitalize;
}
html, body, h2, p, ul {
margin: 0;
padding: 0;
list-style-type: none;
}
body {
padding: 1rem;
}
h2 {
margin-bottom: 0.5rem;
}
main .button {
cursor: pointer;
}
.button {
position: relative;
}
.dropdown {
display: none;
position: absolute;
top: 2.75rem;
left: -0.1rem;
right: -0.1rem;
background-color: #fff;
}
#toggle:checked ~ main .dropdown { display: block; }
`;
main .button, span, span::after, .dropdown, li {
display: inline-block;
padding: 0.25rem;
border-style: solid;
border-color: #666;
user-select: none;
}
.button:hover, .button:hover .span_wrapper span::after,li:hover {
background-color: #eee;
}
.button:active, .button:active .span_wrapper span::after, li:active {
background-color: #ccc;
}
main p {
padding: 0.25rem 1rem;
}
.span_wrapper {
transform: scale( 0.75 ) translateY( -0.125rem ); border-style: none;
}
.span_wrapper span, .span_wrapper span::after {
transform: rotate( 45deg ); width: 1rem; height: 1rem;
padding: 0; border-style: none;
background-color: #222; content: "";
}
.span_wrapper span::after {
transform: translateY( -0.125rem ) translateX( -0.125rem );
background-color: #fff;
}
#arial:checked ~ main { font-family: Arial; }
#verdana:checked ~ main { font-family: Verdana; }
#georgia:checked ~ main { font-family: Georgia; }
input { display: none; }
html body { padding-top: 0 }
<style>
li {
display: block; padding: 0.5rem; border-style: none;
}
</style>
<header>
</header>
<input type="checkbox" id="toggle">
<input type="radio" id="arial" name="font">
<input type="radio" id="verdana" name="font">
<input type="radio" id="georgia" name="font">
<main>
<h2>font style</h2>
<label for="toggle">
<div class="button">
<p>
arial
<span class="span_wrapper">
<span></span>
</span>
</p>
<div class="dropdown">
<ul>
<li><label for="arial">Arial</label></li>
<li><label for="verdana">Verdana</label></li>
<li><label for="georgia">Georgia</label></li>
</ul>
</div>
</div>
</label>
<br><br>
<p>lorem ipsum</p>
</main>
