CSS单选按钮是一种常用的Web元素,它可以让用户在一组选项中选择一个。通过CSS的样式设置,可以让单选按钮更加美观和适合网站的风格。下面我们来介绍一个在线生成CSS单选按钮的工具。
<style> /*定义单选按钮样式*/ input[type="radio"] { display: none; /*隐藏原始的单选按钮*/ } label.radio { display: inline-block; margin: 0 0.5em; padding: 0.5em 1em; border: 1px solid #ccc; border-radius: 4px; color: #333; cursor: pointer; } input[type="radio"]:checked + label.radio { background-color: #333; color: #fff; } </style> <div> <input type="radio" name="group" id="option1" value="1" checked="checked" /> <label class="radio" for="option1">选项1</label> <input type="radio" name="group" id="option2" value="2" /> <label class="radio" for="option2">选项2</label> <input type="radio" name="group" id="option3" value="3" /> <label class="radio" for="option3">选项3</label> <input type="radio" name="group" id="option4" value="4" /> <label class="radio" for="option4">选项4</label> </div>
以上代码中,我们定义了单选按钮和标签的样式,并使用了CSS选择器来设置被选中的单选按钮的样式。将以上代码保存到HTML文件中,就可以得到一个简单的CSS单选按钮组。你可以根据自己的需求修改样式,以得到适合自己网站的单选按钮样式。