How to add custom style to the radio button?-CodePudding

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....). Is there any way to do it in react element or HTML element? I want to keep the number and then add the labels.

if you have any ideas pls give me a solution

Here is the image

CodePudding user response：

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.

CodePudding user response：

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>

CodePudding user response：

You can use accent-color property

.green {
  accent-color: green;
}

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

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

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

If you want to use css counter to show number

.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 >
  <h3>Group 1</h3>
  <input  name="group1" type="radio" />
  <input  name="group1" type="radio" />
  <input  name="group1" type="radio" />
</div>
<div >
  <h3>Group 2</h3>
  <input  name="group2" type="radio" />
  <input  name="group2" type="radio" />
  <input  name="group2" type="radio" />
</div>