如何为单选按钮添加自定义样式？
[英]How to add custom style to the radio button?
问题描述
I want to know how to add a custom style to the radio button like the below picture.
我想知道如何为单选按钮添加自定义样式，如下图所示。 Need to keep the number(No.01) and then add the labels(Issue of phytosanitary certificates. phytosanitary certificates....).需要保留编号（No.01），然后添加标签（Issue of phytosanitary certificates. phytosanitary certificates....）。 Is there any way to do it in react element or HTML element?有没有办法在反应元素或 HTML 元素中做到这一点？ I want to keep the number and then add the labels.我想保留号码，然后添加标签。
if you have any ideas pls give me a solution如果你有任何想法请给我一个解决方案
3 个解决方案
解决方案1
0 2022-12-22 05:44:04
You can do it in CSS file or by using style tag inside the head element and by giving a class to that radio button.您可以在 CSS 文件中或通过在 head 元素内使用 style 标签并为该单选按钮提供一个类来完成此操作。
解决方案2
0 2022-12-22 06:19:04
Try this!试试这个！
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>
解决方案3
0 2022-12-22 06:27:52
You can use accent-color property您可以使用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" />
If you want to use css counter to show number如果你想使用 css counter 来显示数字
.green { --size: 16px; width: var(--size); height: var(--size); accent-color: green; counter-increment: radioGreen; display: flex; align-items: center; }.green::after { margin-left: calc(var(--size) * 1.2); content: "No." counter(radioGreen, decimal-leading-zero); }.radio-group { display: flex; flex-direction: column; align-items: flex-start; counter-reset: radioGreen; }
<div class="radio-group"> <h3>Group 1</h3> <input class="green" name="group1" type="radio" /> <input class="green" name="group1" type="radio" /> <input class="green" name="group1" type="radio" /> </div> <div class="radio-group"> <h3>Group 2</h3> <input class="green" name="group2" type="radio" /> <input class="green" name="group2" type="radio" /> <input class="green" name="group2" type="radio" /> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.