css动画select

最新推荐文章于 2022-06-23 19:16:56 发布

最新推荐文章于 2022-06-23 19:16:56 发布 · 317 阅读

本文介绍了一个使用CSS动画的啤酒选择器示例。通过HTML表单和CSS样式实现了一个交互式的啤酒选项选择器，用户可以通过点击不同的选项来选择喜欢的啤酒。

css动画select

演示

 
   XML/HTML Code 
  
 
   <form>  
  <fieldset class="radio-container">  
<div class="radio-options">  
<div class="toggle">Choose your beer</div>  
<ul>  
<li>  
<input type="radio" name="my-beer" id="choice1" value="choice1">  
<label for="choice1">Cul Dorcha</label>  
</li>  
<li>  
<input type="radio" name="my-beer" id="choice2" value="choice2">  
<label  for="choice2">Rowers Red Ale</label>  
</li>  
<li>  
<input type="radio" name="my-beer" id="choice3" value="choice3">  
<label for="choice3">Belfast Ale</label>  
</li>  
<li>  
<input type="radio" name="my-beer" id="choice4" value="choice4">  
<label for="choice4">O'Hara Irish Stout</label>  
</li>  
</ul>  
</div>  
</fieldset>  
</form>  
 
  

 
   XML/HTML Code 
  
 
   <form>  
  <fieldset class="radio-container">  
<div class="radio-options">  
<div class="toggle">Choose your beer</div>  
<ul>  
<li>  
<input type="radio" name="my-beer" id="choice1" value="choice1">  
<label for="choice1">Cul Dorcha</label>  
</li>  
<li>  
<input type="radio" name="my-beer" id="choice2" value="choice2">  
<label  for="choice2">Rowers Red Ale</label>  
</li>  
<li>  
<input type="radio" name="my-beer" id="choice3" value="choice3">  
<label for="choice3">Belfast Ale</label>  
</li>  
<li>  
<input type="radio" name="my-beer" id="choice4" value="choice4">  
<label for="choice4">O'Hara Irish Stout</label>  
</li>  
</ul>  
</div>  
</fieldset>  
</form>  
 
  