css单选按钮 在线生成

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单选按钮组。你可以根据自己的需求修改样式，以得到适合自己网站的单选按钮样式。