reactjs 如何给单选按钮添加自定义样式？

gwbalxhn 于 2022-12-22 发布在 React

关注(0)|答案(3)|浏览(163)

我想知道如何给单选按钮添加一个自定义样式，如下图。需要保留编号（No.01），然后添加标签（植物检疫证书签发。植物检疫证书......）。有没有办法在react元素或HTML元素中完成？我想保留编号，然后添加标签。
如果你有什么想法，请给予我一个解决办法
Here is the image

reactjs

来源：https://stackoverflow.com/questions/74883951/how-to-add-custom-style-to-the-radio-button

3条答案

按热度按时间

bwleehnv1#

您可以在CSS文件中完成此操作，也可以在head元素中使用style标签并为该单选按钮提供一个类。

赞(0）回复(0）举报 2022-12-22

uidvcgyl2#

试试这个!

input[type="radio"] {
  /* ...existing styles */
  display: flex;
  align-items: center;
  justify-content: center;
}

input[type="radio"]::before {
  content: "";
  color: green;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  transform: scale(.5);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em green;
}

<html>
<body>
<label>Radio Button</label>
<input type="radio">
</body>
</html>

赞(0）回复(0）举报 2022-12-22

xriantvc3#

您可以使用accent-color属性

.green {
  accent-color: green;
}

<h3>group 1</h3>
<input class="green" name="group1" type="radio" />
<input class="green" name="group1" type="radio" checked/>

<h3>group 2</h3>
<input class="green" name="group2" type="radio" checked/>
<input class="green" name="group2" type="radio" checked/>

<h3>group 3</h3>
<input class="green" name="group3" type="radio" />
<input class="green" name="group3" type="radio" />

如果你想用css计数器来显示数字
一个二个一个一个

赞(0）回复(0）举报 2022-12-22

我来回答

reactjs 如何给单选按钮添加自定义样式？

3条答案

相关问题

热门标签

最新问答