css修改input样式

最新推荐文章于 2024-06-19 11:34:22 发布

小灰机大

最新推荐文章于 2024-06-19 11:34:22 发布

阅读量2.2k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/Zhou_Yulong/article/details/101980634

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

修改input样式（图片覆盖）

效果图

修改前
在这里插入图片描述
修改后

思路

使用一张图片，将input标签和img标签放在同一个容器
将input标签width和height 放大，之后用input完全覆盖图片
将input透明，则只显示下层图片

代码

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main-box">
    <div class="plus-box">
        <img class="plus" src="plus.jpg">
        <input type="file">
    </div>
</div>
</body>
</html>

CSS

css 注释为/**/, 但为了看着清楚此处改为 //

.plus-box {
    display: inline-block;  /*设为内联块,为了看的清楚，下面注释改为双斜杠*/
    position: relative;  // 设置relative定为是为了配合下面的 position:absolute来实现img和input重合
    width: 100px; // 确定整个区域大小-
    height: 100px;
    border: 1px solid #000000;
    border-radius: 10px; //把矩形框设置为角为弧状的框
    overflow: hidden; // 将子元素超过自己的部分隐藏
}
img {
    position: absolute;
    left: 0; // 在父元素的最左边
    width: 100px;
    height: 100px;
}
input {
    left: 0;
    float: left;
    position: absolute;
    width: 110px;
    height: 150px;
    background: #ff0000;
    opacity: 0; // 设置此元素透明度，其中0为完全透明，1为完全不透明
}

小灰机大

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
css修改input样式

修改input样式（图片覆盖）效果图修改前修改后思路使用一张图片，将input标签和img标签放在同一个容器将input标签width和height 放大，之后用input完全覆盖图片将input透明，则只显示下层图片代码HTML<!DOCTYPE html><html><head> <link rel="sty...
复制链接

扫一扫

专栏目录