单选和多选按钮如何给图片加样式


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

这次给大家带来单选和多选按钮如何给图片加样式,单选和多选按钮给图片加样式的注意事项有哪些,下面就是实战案例,一起来看一下。

之前一直看到有人在问,单选按钮和多选按钮怎么加样式、怎么把按钮变大?下面把我做的一个例子分享出来

代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script type="text/javascript">

$(function(){

$("input[type='checkbox']").click(function(){

if($(this).is(':checked')){

$(this).attr("checked","checked");

$(this).parent().removeClass("c_off").addClass("c_on");

}else{

$(this).removeAttr("checked");

$(this).parent().removeClass("c_on").addClass(" c_off");

}

});

$("input[type='radio']").click(function(){

$("input[type='radio']").removeAttr("checked");

$(this).attr("checked","checked");

$(this).parent().removeClass("r_off").addClass("r_on").siblings().removeClass("r_on").addClass("r_off");

});

});

</script>

</head>

<style>

/* 多选/单选 */

label {

display: block;

cursor: pointer;

line-height: 26px;

margin-bottom: 20px;

width: 26px;

height: 26px;

line-height: 26px;

float: left;

margin-top: 6px;

}

.radios {

padding-top: 18px;

border-top: 1px solid #049CDB;

}

.label_check input, .label_radio input {

margin-right: 5px;

}

.lblby .label_check, .lblby .label_radio {

margin-right: 8px;

}

.lblby .label_radio, .lblby .label_check {

background: url(../images/jxc_btn.png) no-repeat;

}

.lblby .label_check {

background-position: 0 0px

}

.lblby label.c_on {

background-position: 0 -26px;

}

.lblby .label_radio {

background-position: 0 -52px;

}

.lblby label.r_on {

background-position: 0 -78px;

}

.lblby .label_check input, .lblby .label_radio input {

position: absolute;

left: -9999px;

}

</style>

<body class="lblby">

<label for="checkbox-01" class="label_check c_on">

<input type="checkbox" checked="checked" value="1" id="checkbox-01" name="sample-checkbox-01" />

Checkbox1 </label>

<label for="checkbox-02" class="label_check">

<input type="checkbox" value="1" id="checkbox-02" name="sample-checkbox-02" />

Checkbox2</label>

<label for="radio-01" class="label_radio r_on">

<input type="radio" value="1" checked="checked" id="radio-01" name="sample-radio" />

Radio1 </label>

<label for="radio-02" class="label_radio r_off">

<input type="radio" value="1" id="radio-02" name="sample-radio" />

Radio2 </label>

<label for="radio-03" class="label_radio r_off">

<input type="radio" value="1" id="radio-03" name="sample-radio" />

Radio3 </label>

</body>

</html>

相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

html怎么实现可输入的下拉菜单

a标签如何使用href属性与onclick事件

css3的新单位vw、vh、vmin、vmax应该如何使用

CSS的经典三栏布局如何实现

以上就是单选和多选按钮如何给图片加样式的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

vue.js怎么改变样式

css图片怎么变圆

css怎么实现图片半透明效果

html设置表格边框样式

css实现卡片式图片效果

html怎么让文字在图片表面

html实现美化上传文件样式

用react完成一个图片轮播组件

h5调用相机拍照并压缩图片

react中图片用什么标签

更多相关阅读请进入《样式》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...