用html如何实现点击按钮变换按钮的样式,就是点击一个按钮按钮的图形样式就变了

用html如何实现点击按钮变换按钮的样式,就是点击一个按钮按钮的图形样式就变了,第1张

参考如下:

<!DOCTYPE html >

<html lang="en">

<head>

   <meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">

   <meta http-equiv="X-UA-Compatible" content="IE=edge" />

   <title>更换单选按钮显示样式</title>

   <style>

       input[type='radio'].radio {opacity:0 display:inline-block height:20px }

       label.radio {background:url(imgs/radio_check.png) no-repeat height:20px padding-left:25px}

       input[type='radio'].radio:checked + .radio {background:url(imgs/radio_checked.png) no-repeat}

   </style>

</head>

<body>

   

   <input type="radio" name="gender" id="x" value="X"><label for="x">我要保密</label><br>

   <input type="radio" name="gender" id="y" value="M"><label for="y">我是帅哥</label><br>

   <input type="radio" name="gender" id="z" value="F"><label for="z">我是美女</label><br>

   

   <input type="radio" name="sex" id="a" value="X" class="radio"><label for="a" class="radio">我要保密</label><br>

   <input type="radio" name="sex" id="b" value="M" class="radio"><label for="b" class="radio" >我是帅哥</label><br>

   <input type="radio" name="sex" id="c" value="F" class="radio"><label for="c" class="radio" >我是美女</label><br>

</body>

</html>

可以通过样式来设置:你可先给你的按钮设置一个class,比如:class="btn";方法有3种:1.如果有你外链样式表你可以在样式表征.btn{width:200pxheight:50px}2.如果没有连接你直接上头部加上<style type="text/css">.btn{width:200pxheight:50px}</style>3.你可以直接在按钮上加比如:<button style="width:200pxheight:50px">按钮</button>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7260525.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-03
下一篇 2023-04-03

发表评论

登录后才能评论

评论列表(0条)

保存