我的意思是,单选按钮本身由一个圆形和中心的一个点组成(当按钮被选中时)。我想改变的是两者的颜色。使用CSS可以做到这一点吗?
当前回答
一个聪明的方法是创建一个单独的div,高度和宽度为-例如- 50px,然后半径为50px,将其放在单选按钮上…
其他回答
我改变了单选按钮的颜色和大小。试试这个
.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>
你可以使用CSS的重音颜色属性来改变颜色。
input[type='radio'] {
accent-color: #232323;
}
它适用于Chrome/Edge 93+, Firefox 92+和Safari 15.4+(浏览器支持信息来自caniuse。)
为了创建额外的元素,我们可以使用:after,:before(所以我们不需要对HTML进行太多的更改)。对于单选按钮和复选框,我们可以使用:checked。我们还可以使用其他一些伪元素(例如:hover)。使用这些组合,我们可以创建一些非常酷的自定义表单。检查这个
正如其他人所说,没有办法在所有浏览器中实现这一点,所以跨浏览器实现这一点的最好方法是使用javascript。基本上你必须把你的单选按钮变成链接(完全可自定义通过CSS)。每次点击链接都将绑定到相关的单选框,切换他的状态和其他所有状态。
我构建了@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;
}
预览: https://www.codeply.com/p/y47T4ylfib
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?