select option框改成input radio的样式 – sky8g网站-免费提供IT技术资料，开始你的IT生涯！

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

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

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

<!DOCTYPE html>

<html>

<head>

<title>select option框改成input radio的样式</title>

</head>

<body>

</select>

</div>

</body>

</html>

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

#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源代码研究与开发。希望你下次光临，你的认可和留言是对我们最大的支持，谢谢！