如何更改单选按钮的颜色?

单选按钮是特定于每个操作系统/浏览器的原生元素。没有办法改变它的颜色/风格，除非你想实现自定义图像或使用自定义的Javascript库，其中包括图像(例如这 - 缓存的链接)

这在本地CSS中是不可能的。您必须使用背景图像和一些javascript技巧。

只有当你的目标是基于webkit的浏览器(Chrome和Safari，也许你正在开发Chrome WebApp，谁知道…)，你可以使用以下:

input[type='radio'] {
-webkit-appearance: none;
}

然后将其设置为一个简单的HTML元素，例如应用背景图像。

当选择输入时，使用input[type='radio']:active来提供备用图形

更新:从2018年开始，你可以添加以下内容来支持多个浏览器供应商:

input[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

正如其他人所说，没有办法在所有浏览器中实现这一点，所以跨浏览器实现这一点的最好方法是使用javascript。基本上你必须把你的单选按钮变成链接(完全可自定义通过CSS)。每次点击链接都将绑定到相关的单选框，切换他的状态和其他所有状态。

为了创建额外的元素，我们可以使用:after，:before(所以我们不需要对HTML进行太多的更改)。对于单选按钮和复选框，我们可以使用:checked。我们还可以使用其他一些伪元素(例如:hover)。使用这些组合，我们可以创建一些非常酷的自定义表单。检查这个

你可以像CSS技巧中解释的那样使用复选框

http://css-tricks.com/the-checkbox-hack/ < a href = " http://css-tricks.com/the-checkbox-hack/ " > < / >

单选按钮工作示例:

http://codepen.io/Angelata/pen/Eypnq < a href = " http://codepen.io/Angelata/pen/Eypnq " > < / >

input[type=radio]:checked ~ .check {}
input[type=radio]:checked ~ .check .inside{}

适用于IE9+， Firefox 3.5+， Safari 1.3+， Opera 6+， Chrome任何浏览器。

将单选按钮绑定到样式标签可能会有所帮助。详细信息见这个答案。

一个快速的解决方法是使用:after覆盖单选按钮输入样式，但是创建自己的自定义工具包可能是一个更好的实践。

    input[type='radio']:after {
width: 15px;
height: 15px;
border-radius: 15px;
top: -2px;
left: -1px;
position: relative;
background-color: #d1d3d1;
content: '';
display: inline-block;
visibility: visible;
border: 2px solid white;
}


input[type='radio']:checked:after {
width: 15px;
height: 15px;
border-radius: 15px;
top: -2px;
left: -1px;
position: relative;
background-color: #ffa500;
content: '';
display: inline-block;
visibility: visible;
border: 2px solid white;
}

<input type='radio' name="gender"/>
<input type='radio' name="gender"/>

正如Fred提到的，没有办法在颜色、大小等方面对单选按钮进行本地样式设置。但是您可以使用CSS Pseudo元素来设置任意给定单选按钮的冒名顶替者，并对其进行样式化。谈到JamieD所说的，关于我们如何使用:after Pseudo元素，您可以同时使用:before和:after来实现理想的外观。

这种方法的好处:

• 样式你的单选按钮，还包括一个标签的内容。
• 改变外缘颜色和/或格子圈为任何你喜欢的颜色。
• 通过修改背景颜色属性和/或可选使用不透明度属性，使其具有透明外观。
• 缩放单选按钮的大小。
• 在需要的地方添加各种投影属性，如CSS投影嵌入。
• 将这个简单的CSS/HTML技巧混合到各种Grid系统中，例如Bootstrap 3.3.6，这样它就可以在视觉上匹配Bootstrap组件的其余部分。

简短演示说明如下:

• 为每个单选按钮设置一个相对的内联块
• 隐藏本机单选按钮的感觉，没有办法直接样式它。
• 样式和对齐标签
• 在伪元素之前重建CSS内容做两件事-样式单选按钮的外缘和设置元素首先出现(标签内容的左边)。你可以在这里学习伪元素的基本步骤——http://www.w3schools.com/css/css_pseudo_elements.asp
• 如果选中单选按钮，请求标签显示CSS内容(单选按钮中的样式点)。

HTML

<div class="radio-item">
<input type="radio" id="ritema" name="ritem" value="ropt1">
<label for="ritema">Option 1</label>
</div>


<div class="radio-item">
<input type="radio" id="ritemb" name="ritem" value="ropt2">
<label for="ritemb">Option 2</label>
</div>

CSS

.radio-item {
display: inline-block;
position: relative;
padding: 0 6px;
margin: 10px 0 0;
}


.radio-item input[type='radio'] {
display: none;
}


.radio-item label {
color: #666;
font-weight: normal;
}


.radio-item label:before {
content: " ";
display: inline-block;
position: relative;
top: 5px;
margin: 0 5px 0 0;
width: 20px;
height: 20px;
border-radius: 11px;
border: 2px solid #004c97;
background-color: transparent;
}


.radio-item input[type=radio]:checked + label:after {
border-radius: 11px;
width: 12px;
height: 12px;
position: absolute;
top: 9px;
left: 10px;
content: " ";
display: block;
background: #004c97;
}

简短的演示来查看它的操作

总之，不需要JavaScript，图像或电池。纯CSS。

试试这个带有过渡的css:

< a href = " https://codepen。io/ ahmadi -aghazadeh-a/pen/yayPGa" rel="nofollow noreferrer">Demo . io/ adama -aghazadeh-a/pen/yayPGa" rel="nofollow noreferrer

$DarkBrown: #292321;


$Orange: #CC3300;


div {
margin:0 0 0.75em 0;
}


input[type="radio"] {
display:none;
}
input[type="radio"] + label {
color: $DarkBrown;
font-family:Arial, sans-serif;
font-size:14px;
}
input[type="radio"] + label span {
display:inline-block;
width:19px;
height:19px;
margin:-1px 4px 0 0;
vertical-align:middle;
cursor:pointer;
-moz-border-radius:  50%;
border-radius:  50%;
}


input[type="radio"] + label span {
background-color:$DarkBrown;
}


input[type="radio"]:checked + label span{
background-color:$Orange;
}


input[type="radio"] + label span,
input[type="radio"]:checked + label span {
-webkit-transition:background-color 0.4s linear;
-o-transition:background-color 0.4s linear;
-moz-transition:background-color 0.4s linear;
transition:background-color 0.4s linear;
}

Html:

<div>
<input type="radio" id="radio01" name="radio" />
<label for="radio01"><span></span>Radio Button 1</label>
</div>


<div>
<input type="radio" id="radio02" name="radio" />
<label for="radio02"><span></span>Radio Button 2</label>
</div>

您可以通过两种纯CSS方式实现自定义单选按钮

1. 通过使用CSS appearance删除标准外观并应用自定义外观。不幸的是，这是不工作在IE。演示:

   input[type="radio"] {
   /* remove standard background appearance */
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   /* create custom radiobutton appearance */
   display: inline-block;
   width: 25px;
   height: 25px;
   padding: 6px;
   /* background-color only for content */
   background-clip: content-box;
   border: 2px solid #bbbbbb;
   background-color: #e7e6e7;
   border-radius: 50%;
   }
   
   
   /* appearance for checked radiobutton */
   input[type="radio"]:checked {
   background-color: #93e026;
   }
   
   
   /* optional styles, I'm using this for centering radiobuttons */
   .flex {
   display: flex;
   align-items: center;
   }

   <div class="flex">
   <input type="radio" name="radio" id="radio1" />
   <label for="radio1">RadioButton1</label>
   </div>
   <div class="flex">
   <input type="radio" name="radio" id="radio2" />
   <label for="radio2">RadioButton2</label>
   </div>
   <div class="flex">
   <input type="radio" name="radio" id="radio3" />
   <label for="radio3">RadioButton3</label>
   </div>

2. 通过隐藏单选按钮并将自定义单选按钮外观设置为label的伪选择器。顺便说一下，这里不需要绝对定位(我在大多数演示中都看到了绝对定位)。演示:

   *,
   *:before,
   *:after {
   box-sizing: border-box;
   }
   
   
   input[type="radio"] {
   display: none;
   }
   
   
   input[type="radio"]+label:before {
   content: "";
   /* create custom radiobutton appearance */
   display: inline-block;
   width: 25px;
   height: 25px;
   padding: 6px;
   margin-right: 3px;
   /* background-color only for content */
   background-clip: content-box;
   border: 2px solid #bbbbbb;
   background-color: #e7e6e7;
   border-radius: 50%;
   }
   
   
   /* appearance for checked radiobutton */
   input[type="radio"]:checked + label:before {
   background-color: #93e026;
   }
   
   
   /* optional styles, I'm using this for centering radiobuttons */
   label {
   display: flex;
   align-items: center;
   }

   <input type="radio" name="radio" id="radio1" />
   <label for="radio1">RadioButton1</label>
   <input type="radio" name="radio" id="radio2" />
   <label for="radio2">RadioButton2</label>
   <input type="radio" name="radio" id="radio3" />
   <label for="radio3">RadioButton3</label>

简单的跨浏览器自定义单选按钮的例子

.checkbox input{
display: none;
}
.checkbox input:checked + label{
color: #16B67F;
}
.checkbox input:checked + label i{
background-image: url('http://kuzroman.com/images/jswiddler/radio-button.svg');
}
.checkbox label i{
width: 15px;
height: 15px;
display: inline-block;
background: #fff url('http://kuzroman.com/images/jswiddler/circle.svg') no-repeat 50%;
background-size: 12px;
position: relative;
top: 1px;
left: -2px;
}

<div class="checkbox">
<input type="radio" name="sort" value="popularity" id="sort1">
<label for="sort1">
<i></i>
<span>first</span>
</label>


<input type="radio" name="sort" value="price" id="sort2">
<label for="sort2">
<i></i>
<span>second</span>
</label>
</div>

https://jsfiddle.net/kuzroman/ae1b34ay/

一个聪明的方法是创建一个单独的div，高度和宽度为-例如- 50px，然后半径为50px，将其放在单选按钮上…

一个简单的修复方法是使用以下CSS属性。

input[type=radio]:checked{
background: \*colour*\;
border-radius: 15px;
border: 4px solid #dfdfdf;
}

您可以在无线电输入中嵌入span元素，然后在检查无线电输入时选择要呈现的颜色。看看下面这个来自w3schools的例子。

<!DOCTYPE html>
<html>
<style>
/* The container */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}


/* Hide the browser's default radio button */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}


/* Create a custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
}


/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}


/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #00a80e;
}


/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}


/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
display: block;
}


/* Style the indicator (dot/circle) */
.container .checkmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
</style>
<body>


<h1>Custom Radio Buttons</h1>
<label class="container">One
<input type="radio" checked="checked" name="radio">
<span class="checkmark"></span>
</label>
<label class="container">Two
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
<label class="container">Three
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
<label class="container">Four
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>


</body>

在下面的代码段中改变背景颜色就可以了。

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #00a80e;
}

来自如何创建自定义单选按钮

我构建了@klewis'代码的另一个分支，通过使用:before/:after伪元素和隐藏的单选输入按钮来演示纯css和渐变。

HTML:

sample radio buttons:
<div style="background:lightgrey;">
<span class="radio-item">
<input type="radio" id="ritema" name="ritem" class="true" value="ropt1" checked="checked">
<label for="ritema">True</label>
</span>


<span class="radio-item">
<input type="radio" id="ritemb" name="ritem" class="false" value="ropt2">
<label for="ritemb">False</label>
</span>
</div>

：

CSS:

.radio-item input[type='radio'] {
visibility: hidden;
width: 20px;
height: 20px;
margin: 0 5px 0 5px;
padding: 0;
}
.radio-item input[type=radio]:before {
position: relative;
margin: 4px -25px -4px 0;
display: inline-block;
visibility: visible;
width: 20px;
height: 20px;
border-radius: 10px;
border: 2px inset rgba(150,150,150,0.75);
background: radial-gradient(ellipse at top left, rgb(255,255,255) 0%, rgb(250,250,250) 5%, rgb(230,230,230) 95%, rgb(225,225,225) 100%);
content: "";
}
.radio-item input[type=radio]:checked:after {
position: relative;
top: 0;
left: 9px;
display: inline-block;
visibility: visible;
border-radius: 6px;
width: 12px;
height: 12px;
background: radial-gradient(ellipse at top left, rgb(245,255,200) 0%, rgb(225,250,100) 5%, rgb(75,175,0) 95%, rgb(25,100,0) 100%);
content: "";
}
.radio-item input[type=radio].true:checked:after {
background: radial-gradient(ellipse at top left, rgb(245,255,200) 0%, rgb(225,250,100) 5%, rgb(75,175,0) 95%, rgb(25,100,0) 100%);
}
.radio-item input[type=radio].false:checked:after {
background: radial-gradient(ellipse at top left, rgb(255,225,200) 0%, rgb(250,200,150) 5%, rgb(200,25,0) 95%, rgb(100,25,0) 100%);
}
.radio-item label {
display: inline-block;
height: 25px;
line-height: 25px;
margin: 0;
padding: 0;
}

如果你正在使用表单。检查，你可以这样做

超文本标记语言

<Form.Check
type="radio"
id="Radio-card"
label={`check me out`}
name="paymentmethod"
value="card"
/>

SCSS

.form-check {
display: flex;
align-items: center;
input[type="radio"] {
-moz-appearance: none;
appearance: none;
          

width: 11px;
height: 11px;
padding: 1px;
background-clip: content-box;
border: 1px solid hotpink;
background-color: white;
border-radius: 50%;
}
          

input[type="radio"]:checked {
outline: none;
background-color: hotpink;
border: 1px solid hotpink;
}
label {
font-size: 14px;
font-weight: 600;
}
}

对于我的使用，我想做的只是改变颜色，没有其他，所以我已经从@klewis的答案，并将其更改为…

1. 使收音机与浏览器默认(在我的情况下是Chrome)相同，使用相对%和em而不是固定的px。注意:em基于input[type=radio]的字体大小，这可以被继承。可能需要对下面的值进行调整。
2. 通过不使用display: none;并将:before和:after应用于原始单选按钮而不是标签来保持原始单选按钮的可访问性函数(如聚焦时的轮廓)。

/* make default radio 'invisible' */
input[type=radio] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}


/* make new radio outer circle */
input[type=radio]:before {
content: " ";
display: inline-block;
position: relative;
width: 0.8em;
height: 0.8em;
border-radius: 50%;
border: 1px solid grey;
background-color: transparent;
}


/* change colour of radio outer circle when checked */
input[type=radio]:checked:before {
border-color: green;
}


/* make new radio inner circle when checked */
input[type=radio]:checked:after {
content: " ";
display: block;
position: absolute;
width: 0.55em;
height: 0.55em;
border-radius: 50%;
top: 0.4em;
left: 0.13em;
background: green;
}

｀

对于那些喜欢从一个最小示例开始开发的人来说，这里有一个简单的自定义单选按钮，它不依赖于label:

[type="radio"] {
visibility: hidden; /* hide default radio button */
/* you may need to adjust margin here, too */
}
[type="radio"]::before { /* create pseudoelement */
border: 2px solid gray; /* thickness, style, color */
height: .9em; /* height adjusts with font */
width: .9em; /* width adjusts with font */
border-radius: 50%; /* make it round */
display: block; /* or flex or inline-block */
content: " "; /* won't display without this */
cursor: pointer; /* appears clickable to mouse users */
visibility: visible; /* reverse the 'hidden' above */
}


[type="radio"]:checked::before { /* selected */
/* add middle dot when selected */
/* slightly bigger second value makes it smooth */
/* even more (e.g., 20% 50%) would make it fuzzy */
background: radial-gradient(gray 36%, transparent 38%);
}

<br>
<input type="radio" name="example" id="one" value="one">
<label for="one">one</label>
<br>
<br>
<input type="radio" name="example" id="two" value="two">
<label for="two">two</label>

试试这样做:

#yes{
border:2px solid white;
box-shadow:0 0 0 1px #392;
appearance:none;
border-radius:50%;
width:12px;
height:12px;
background-color:#fff;
transition:all ease-in 0.2s;


}
#yes:checked{
background-color:#392;
}
#no{
border:2px solid white;
box-shadow:0 0 0 1px #932;
appearance:none;
border-radius:50%;
width:12px;
height:12px;
background-color:#fff;
transition:all ease-in 0.2s;


}
#no:checked{
background-color:#932;
}

<input id="yes" type="radio" name="s"><label for="yes">Yes</label></br>
<input id="no" type="radio" name="s"><label for="no">No</label>

代码更少，看起来更好，你不需要玩:before， :after和position来达到这个效果。

你可以使用CSS accent-color属性来改变颜色。

input[type='radio'] {
accent-color: #232323;
}

它适用于Chrome/Edge 93+， Firefox 92+和Safari 15.4+(浏览器支持信息来自caniuse。)

你应该使用accent-color CSS属性，它为用户界面控件(如输入(单选按钮，复选框…)或进度条和大多数现代浏览器都支持它设置重音颜色。

input {
accent-color: red;
}

document.querySelector("input[name=accent-color]").addEventListener("input", () => {
document.documentElement.style.setProperty("--accent-color", event.target.value);
});

:root {
--accent-color: red;
}


input,
progress {
accent-color: var(--accent-color);
}


/* Other styles */
label {
display: flex;
align-items: center;
gap: .625rem;
margin-bottom: .625rem;
}


label:first-child {
font-size: 1.15rem;
font-weight: bold;
}


input {
flex: 0 0 auto;
height: 1.25rem;
width: 1.25rem;
}


input[type="color"] {
width: 3rem;
}


input[type="range"] {
width: 12.5rem;
}

<label>Change the accent color<input name="accent-color" type="color" value="#ff0000"></input></label><br>
<label><input name="radio" type="radio" checked></input>Radio button</label>
<label><input name="radio" type="radio"></input>Another radio button</label>
<label><input name="check" type="checkbox" checked></input>Checkbox</label>
<label><input name="range" type="range"></input>Range input</label>
<label><progress value="50" max="100"></progress>Progress bar</label>

这对我很有效，

简单添加css属性:

<强>输入[类型=“radio"]{强调色:红色;}< / >强

这是资源的链接

简单的方法是使用accent-color

accent-color CSS属性为某些元素生成的用户界面控件设置强调色

支持重音颜色的浏览器目前将其应用于以下HTML元素:

<input type="checkbox">
<input type="radio">
<input type="range">
<progress>

一个可运行的示例

body {
display: grid;
padding: 3rem 0;
}


.accent {
accent-color: #30cc7e;
}


form {
display: grid;
grid-auto-columns: fit-content(50%);
grid-template-areas: "a a";
margin: auto;
padding: 0;
gap: 1rem;
}


form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin: auto;
}


form section:first-child {
color-scheme: light;
}
form section:last-child {
color-scheme: dark;
}


fieldset {
border-radius: 8px;
color-scheme: light;
display: flex;
flex: 1;
flex-direction: column;
gap: 1rem;
padding: 1rem;
}


.dark {
color-scheme: dark;
}


.dark fieldset {
background: #100f33;
border-color: #100f33;
color: #fff;
}


.dark .accent {
accent-color: hsla(180, 100%, 70%, 1);
}


h2 {
margin: 0;
}


.notice {
background: #fff9c4;
border-radius: 6px;
margin: 1.5rem auto;
padding: 0.5rem;
text-align: center;
}


@supports (accent-color: #fff) {
.notice {
display: none;
}
}

<div class="notice">
Your browser does not support the <code>accent-color</code> property.
</div>


<form action="">
<fieldset>
<h2>Checkboxes</h2>
<div>
<label for="checkbox">
Default
</label>
<input id="checkbox" type="checkbox" checked>
</div>
<div>
<label for="checkbox-accent">
Accent
</label>
<input id="checkbox-accent" type="checkbox" class="accent" checked>
</div>
</fieldset>


<fieldset>
<h2>Radio</h2>
<div>
<input id="radio" type="radio" checked>
<label for="radio">
Default
</label>
</div>
<div>
<input id="radio-accent" type="radio" class="accent" checked>
<label for="radio-accent">
Accent
</label>
</div>
</fieldset>


<fieldset>
<h2>Progress</h2>
<div>
<label for="progress">
Default
</label>
<progress id="progress" min="0" max="100" value="50"></progress>
</div>
<div>
<label for="progress-accent">
Accent
</label>
<progress id="progress-accent" class="accent" min="0" max="100" value="50"></progress>
</div>
</fieldset>


<fieldset>
<h2>Range</h2>
<div>
<label for="range">
Default
</label>
<input id="range" type="range">
</div>
<div>
<label for="range-accent">
Accent
</label>
<input id="range-accent" class="accent" type="range">
</div>
</fieldset>
</form>

您可以使用css中的重音颜色属性来更改复选框和单选按钮的背景颜色。

input[type=radio] {
accent-color: red;
}

简单来说，可以用重音色

查看页面来源 .

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>


<style>
input[type=radio] {
accent-color: red;
}
</style>
</head>
<body>
<label for="css">Are you like to css</label>
<input type="radio" id="css" value="css">
</body>
</html>

我改变了单选按钮的颜色和大小。试试这个

.radio-tile-group {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}


.radio-tile-group .input-container {
position: relative;
margin: 0.9rem;
}


.radio-tile-group .input-container .radio-button {
opacity: 0;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
cursor: pointer;
}


.radio-tile {
border: 1px solid #eea236;
}


.radio-tile-group .input-container .radio-tile-edit {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 25px;
font-size: 12px;
border-radius: 5px;
padding: 0.2rem;
transition: transform 300ms ease;
height: 25px;
}


@media (min-width: 375px) and (max-width: 812px) {
.radio-tile-group .input-container .radio-tile {
margin-inline: 18px;
}
}


.radio-tile-group .input-container .radio-button:checked+.radio-tile {
border: 3px solid #2980b9;
font-size: 12px;
color: #797979;
transform: scale(1.05, 1.05);
}


.radio-tile-group .input-container .radio-button:checked+.radio-tile .icon svg {
fill: white;
background-color: #2980b9;
}


.radio-tile-group .input-container .radio-button:checked+.radio-tile-edit {
border: 3px solid black;
/* font-size: 12px; */
color: #797979;
transform: scale(1.05, 1.05);
}

<label>Radio button colors:</label>
<br>
<div class="radio-tile-group">
<div class="input-container">
<label class="radio-tile-label" style="background-color: #b60205;border-radius: 5px;">
<input type="radio" value="#b60205" class= "radio-button uncheckall" name="print_color">
<div class="radio-tile-edit" style="background-color: #b60205;">
</label>
</div>
</div>
<div class="input-container">
<label class="radio-tile-label" style="background-color: #d93f0b; border-radius: 5px;">
<input type="radio" value="#d93f0b" class= "radio-button uncheckall" name="print_color">
<div class="radio-tile-edit" style="background-color: #d93f0b;">
</label>
</div>
</div>
<div class="input-container">
<label class="radio-tile-label" style="background-color: #fbca04; border-radius: 5px;">
<input type="radio" value="#fbca04" class= "radio-button uncheckall" name="print_color">
<div class="radio-tile-edit" style="background-color: #fbca04;">
</label>
</div>
</div>
<div class="input-container">
<label class="radio-tile-label" style="background-color: #0e8a16; border-radius: 5px;">
<input type="radio" value="#0e8a16" class= "radio-button uncheckall" name="print_color">
<div class="radio-tile-edit" style="background-color: #0e8a16;">
</label>
</div>
</div>
<div class="input-container">
<label class="radio-tile-label" style="background-color: #006b75; border-radius: 5px;">
<input type="radio" value="#006b75" class= "radio-button uncheckall" name="print_color">
<div class="radio-tile-edit" style="background-color:#006b75">
</label>
</div>
</div>
<div class="input-container">
<label class="radio-tile-label" style="background-color: #1d76db; border-radius: 5px;">
<input type="radio" value="#1d76db" class= "radio-button uncheckall" name="print_color">
<div class="radio-tile-edit" style="background-color: #1d76db;">
</label>
</div>
</div>
<div class="input-container">
<label class="radio-tile-label" style="background-color: #0052cc; border-radius: 5px;">
<input type="radio" value="#0052cc" class= "radio-button uncheckall" name="print_color">
<div class="radio-tile-edit" style="background-color: #0052cc;">
</label>
</div>
</div>
<div class="input-container">
<label class="radio-tile-label" style="background-color: #757575; border-radius: 5px;">
<input type="radio" value="#757575" class= "radio-button uncheckall" name="print_color">
<div class="radio-tile-edit" style="background-color: #757575;">
</label>
</div>
</div>
</div>