vue input标签隐藏使用label自定义样式
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue input标签隐藏使用label自定义样式相关的知识，希望对你有一定的参考价值。
参考技术A 为了做一个自定义的input输入框，需要自定义显示数据，主要是显示手机号码样式，电话号码之间有空格，input标签这样做就比较复杂。通过为input设置属性id，在label标签中设置for=id使label文本与对应的inpu他结合起来。label标签包裹input标签，点击label时，label两次响应，即label本身触发和input触发后冒泡到label上。label标签使用过滤器把数据重新组装做显示，input的value也不会受到影响。光标就需要用css动画做出来。过滤器
css
自定义input file样式
实现方法一：
自定义input file样式；一般都是通过隐藏input，通过定义label来实现。这种做法要注意的是label的for属性要指定input对应的id;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#file {
display: none;
}
label {
padding: 6px 15px;
border-radius: 18px;
background: #2F9DEA;
color: #FFF;
border: 1px solid #49A9ED;
box-shadow: inset 0px 0px 3px #FFF;
}
label:focus,
label:active {
box-shadow: none;
}
</style>
</head>
<body>
<div>
<label for="file">
<input type="file" id="file" />上传文件
</label>
</div>
</body>
</html>
效果如下：
点击后效果：
实现方法二：
<style type="text/css">
/*a upload */
.a-upload {
padding: 4px 10px;
height: 20px;
line-height: 20px;
position: relative;
cursor: pointer;
color: #888;
background: #fafafa;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
display: inline-block;
*display: inline;
*zoom: 1
}
.a-upload input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
filter: alpha(opacity = 0);
cursor: pointer
}
.a-upload:hover {
color: #444;
background: #eee;
border-color: #ccc;
text-decoration: none
}
.file {
position: relative;
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
.file:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
text-decoration: none;
}
</style>
<div> <a href="javascript:void(0);" class="a-upload"> <input type="file" name="" id="">点击这里上传文件 </a> <a href="javascript:void(0);" class="file">选择文件 <input type="file" name="" id=""> </a> </div>
效果：
以上是关于vue input标签隐藏使用label自定义样式的主要内容，如果未能解决你的问题，请参考以下文章