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文件。如图

在html页面找打body标签，在这个标签里新建select标签，在select标签内创建option标签并设置内容。如图

代码：

</select>

保存好html文件后使用浏览器打开，即可看到效果。如图：

所有代码。可直接把所有代码复制到html文件上运行即可看到效果。如图：

所有代码：

<!DOCTYPE html>

<html>

<head>

<title>下拉选择框</title>

</head>

<body>

</select>

</body>

</html>

欢迎分享，转载请注明来源：夏雨云

html 怎么设置单选框的样式