Html 样式化单选按钮背景 colored颜色

发布于06月29日

我希望单选按钮的背景内部 colored颜色与容器的背景 colored颜色相同，并且所选内容周围没有边框.

我try 了背景 colored颜色， colored颜色，但不起作用. 在超文本标记语言中，按钮不是一个表单标签，到目前为止我不需要它，我甚至试着添加它，看看有没有什么变化，但没有结果，有什么 idea 吗？

我知道我可以让普通按钮的样式变得更容易，但我想要"只有一个"的 Select .我可以用JS编写代码，但如果可能的话，单选按钮的样式会更好！

Current situation: actual situation

Desired result: result

.radioButton {
  background-color: rgb(37, 45, 68);
  border-radius: 50px;
}

input {
  accent-color: red;
}

<div class="radioButton">
  <input type="radio" id="color1" name="color" checked="true">
  <input type="radio" id="color2" name="color">
  <input type="radio" id="color3" name="color">
</div>

推荐答案

您可以使用CSS外观:无删除浏览器的默认样式，然后添加您自己的样式:

<style>
  .radioButton {
    background-color: rgb(37, 45, 68);
    border-radius: 50px;
  }
  
  input {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    border-color: transparent;
  }
  
  input:checked {
    background: red;
  }
</style>
<div class="radioButton">
  <input type="radio" id="color1" name="color" checked="true">
  <input type="radio" id="color2" name="color">
  <input type="radio" id="color3" name="color">
</div>

Html相关问答推荐

如何在两个弹性项目之间添加边框？

Html 样式化单选按钮背景 colored颜色

推荐答案

Html相关问答推荐

如何在两个弹性项目之间添加边框？

放大缩小标题在外面的图像

为什么这个高度为100%的页面会出现滚动条？

如何使用css为动态用户输入矩阵添加背景色？

当我关闭时，导航栏跳到了新的生产线

如何使不断增长的div不溢出其包含固定div的父级

如何显示自定义按钮以将产品添加到WooCommerce购物车？

在移动屏幕上显示时分支树视图的响应能力问题

在显示 swift ui 之前加载下一个 YouTube 视频

嵌入最近的 YOUTUBE 视频(不是短片，视频)

在 flexbox 中使用 spacer 是否有效

带圆角帽的 CSS 部分边框

为什么 Flexbox 中相邻元素上的 flex：1 会影响另一个元素的固定宽度？

需要帮助个性化我的 CSS 导航栏：如何在鼠标悬停时突出显示
元素？

如何制作一个布局，其中左侧固定为图像，右侧为按钮，中心或中间位置为文本？

暗模式转换器

圆形边框显示在该部分后面.怎么修？

调整大小时 CSS 溢出

HTML 标记未在页面上展开

为什么我的动画会向 Moz Firefox 中的微调器添加人工制品？