html 怎么设置单选框的样式

1、首先打开编辑器，然后新建一个html文件，编写入基本的框架。

2、然后用form，input和label创建一个单项选择题。

3、创建一个新的css文件，并且用link标签关联HTML文件。

4、然后撤销一下原来按钮的样式。

nput[type="radio"] {

  display: none

}

5、nput[type='radio'] + label:before{

  content: ""

  display: inline-block

  width: 20px

  height: 20px

  border: 2px solid gold

}

首先设置未点击的单选框样式，用border来设置颜色。

6、nput[type='radio']:checked + label:before{

  background-color: red

}

接着设置点击后的背景颜色，这里用background-color。

7、最后运行一下，完成效果图。

HTML在不同浏览器中可能拥有不同的默认样式，所以html一般需要用样式重置，使默认样式在所有的浏览器表现出相同的默认样式，最简单的就是设置css

* {

    margin: 0

    padding: 0

}

一般用上面的就行了。

下面这个是淘宝的样式重置代码，实际项目中可以使用网页链接

给这个套餐的html标签设置一个类class=“active”。

在CSS里面设置.active{点击后的样式比如：background-color:red}

最后给js设置一个点击事件，当套餐被点击只会加入这个active类，也就改变了套餐的样式；

a=document.getElementByID("套餐的ID")

a.click(function(){a.addClasss("active")})

思路是这个思路，代码可能不准确，因为好久不写了，大致是定义一个点击样式也就是css样式active，通过js点击事件把这个样式赋值给某个HTML标签，如果这种标签多的话，可以改成点击其他标签移除之前标签的active样式并赋予点击标签该样式；

如果是鼠标移动到上面的样式就简单了：

span：hover{background-color：black；}

---