您的位置: 首页  >  文章  >  简单利用CSS+HTML修饰a链接修饰radio按钮

简单利用CSS+HTML修饰a链接修饰radio按钮

分类: 文章 • 2024-06-24 19:27:10

利用修饰a链接修饰radio按钮

注意：
1.z-index:(指数)设置堆层顺序数
2.cursor:(光标)设置光标类型
3.opacity:(不透明度)设置不透明度

思路：

  1. 将 input[type=“radio”] 隐藏， opacity: 0; 置于上层，当我们点击它时，就能正确的响应原本的事件。
  2. 自定义一个样式，置于下层，模拟原本相似的样式；
  3. 用 js 实现选中 input[type=“radio”] 时， 在其下层的自定义的元素改变原来的背景颜色。

知识点：
1.absolute：
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。position之absolute是脱离文档流
2.fixed：
生成绝对定位的元素，相对于浏览器窗口进行定位
3.absolute与fixed二者的区别：
都是绝对定位，但是那就是position的fixed值定位的元素会固定在原来的位置不变，不管你如何拖动滚动条，元素都不会改变位置，这从fixed这个英文单词的意思也可以看出，“固定的，不变的，固执的”。而absolute正好相反，拖动滚动条时元素会随着改变位置。

效果：（点击radio后出现图二效果） 简单利用CSS+HTML修饰a链接修饰radio按钮
简单利用CSS+HTML修饰a链接修饰radio按钮

HTML代码:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
    <title>利用修饰a链接修饰radio按钮</title>
    <meta charset="utf-8"  />
    <link rel="stylesheet" href="../css/new_file.css" />
    <script type="text/javascript" src="new_file.js" ></script>
</head>
<body>
    <input type="radio" id="radio" onclick="check()"/>
    <a href="#">radio</a>
</body>
</html>

CSS代码:

*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;/*消除下划线*/
    text-align: center;/*文字对齐方式*/
    z-index: 100;
    color: black;
}
input{
    z-index: 1000;/*设置堆叠顺序数,越大越上层*/
    color: blueviolet;
    opacity: 0;/*设置元素的不透明级别*/
}
a,input{
    height: 50px;
    width: 100px;
    line-height: 50px;
    position:fixed;/*fixed生成绝对定位的元素，相对于浏览器窗口进行定位*/
    bottom:50%;
    left: 50%;
    background: #e23a6e;
    cursor:pointer;/*显示光标类型（手）*/
}

JS代码:

function check(){
    alert("hello");
}

相关推荐