【HTML+CSS】教你切图篇3-自定义单选、多选、下拉框的实现

最新推荐文章于 2025-10-21 13:20:45 发布

原创

最新推荐文章于 2025-10-21 13:20:45 发布 · 5.3k 阅读

5 ·

CC 4.0 BY-SA版权

本文介绍了如何使用HTML+CSS以及JQuery来美化默认的单选、多选和下拉框。通过CSS实现的方法简单且在主流浏览器中兼容性好，但不支持IE8以下。而JQuery实现的方式则能兼容到IE7，但数据获取相对复杂。文章提供了代码示例和插件下载链接。

大家都知道，默认的单选、多选、下拉控件样式实在是丑哭了。下面小编介绍两种实现单选、多选、下拉控件的样式。首先来介绍第一种：

1.用CSS+HTML实现

这种实现方式是简单，获取数据方便，兼容主流浏览器，缺点就是IE8以及以下的浏览器都不兼容，所以要兼容到更低版本的IE浏览器就需要用到第二种方法了。

首先先看效果图：

代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>表单测试</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
	/*复选 S*/
	/*将input隐藏，设置label标签的背景，替换成checkbox，实现自定义标签样式*/
	.checkbox{
		width: 100px;height: 80px;float: left;
	}
	.checkbox01{
		display: none