美化表单——自定义单选按钮和复选按钮

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

大家都知道,在Web的Form中美化是最头痛的,尤其是表单中的“input[type=checkbox]”、“input[type="radio"]”、“input[type=file]”和select这些元素我们单单只使用CSS是无法匹配设计图的,像背景颜色或者背景图片,甚至说margin和padding等等在各浏览器下都没法实现一致的效果,具体大家可以看看这里所展示的页面效果。为了解决这样的问题,我们只有另选其他的途径。使用CSS和js配合,使用他们实现各浏览器的统一样式。

前面我在本站也介绍了这方面的知识点,比如说《自定义表单——美化你的文件载入框》中介绍了如何通过js和css来美化表单中的文件载入框(input[type=file]),在《自定义表单——jQuery制作个性化Checkbox》中介绍了如何通过jQuery和CSS3来美化复选按钮的效果。那么今天我想和大家一起在学习另外一个有关于表单元素的美化知识——自定义单选按钮和复选按钮。就如下面DEMO展示的效果一样:

一、准备工作

上面DEMO展示的单选和复选按钮是不是很靓呀,为了达到上面的那种DEMO效果,我们需要准备两张背景图片:

这两张图就是我们所需要制作的“单选按钮”和“复选按钮”的效果图,我们后期将会使用“sprites”技术,将其当作背景应用到我们表单中,从而实现表单的美化效果。

二、HTML Markup

我们先按照下面的几个条件创建一个基本的表单:

  1. 给每个ipnut定义一个唯一的ID名称;
  2. 给每个input匹配一个label标签;
  3. 匹配好每个label中的“for”属性,其中“for”值对应其匹配的“input”的“ID”名;
  4. 对于单选按钮,如果其是一组的,我们还需要给他们定义一个相同的“name”名。

根据上面的要求,写了一个简单的HTML Markup

			<form class="form" method="post">
				<fieldset>
					<legend>Which genres do you like?</legend>
					<input type="checkbox" value="action" id="check-1" name="genre"><label for="check-1" class="">Action / Adventure</label>
					<input type="check
剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css/custome-design-checkbox-and-radio-width-jquery

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部