select option框改成input radio的样式

作者 1,085

对于前端开发人员有时候我们使用select单选选择框的时候，想通过样式进行更改为input radio的形式 ，那么如何进行更改呢？

今天给大家讲解下如何使用select option框改成input radio的样式。

1.首先我们创建了demo文件，里面的html代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>select option框改成input radio的样式</title>
</head>
<body>
<div id="sky8g_select_change_to_input_radio" >
<select name="area" id="area" size="7">
<option value="">亚洲</option>
<option value="">欧洲</option>
<option value="">非洲</option>
<option value="">南美洲</option>
<option value="">北美洲</option>
<option value="">大洋洲</option>
<option value="">南极洲</option>
</select>
</div>
</body>
</html>

2.我们通过样式进行更改如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style type="text/css">
#sky8g_select_change_to_input_radio {
height: 600px;
width: 200px;
margin:100px auto;
}
#sky8g_select_change_to_input_radio select{
overflow-y: hidden;
    border: none;
    width: 120px;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    text-align: center;
}
select option:checked {
  background: red linear-gradient(0deg, red 0%, red 100%);
}
select option{
padding:5px 0;
}
</style>

显示如下：

select option框改成input radio的样式

如果有不懂的地方请留言，SKY8G网站编辑者专注于研究IT源代码研究与开发。希望你下次光临，你的认可和留言是对我们最大的支持，谢谢！

上一篇: Magento获取产品分类的图片

下一篇: Centos 8安装后无法连接网络Internet

请 登录 评论
avatar