我正在尝试创建一个类似于 paytm 登录字段的文本框。下面是我的代码:
$(".textBox input").on("focus", function() {
$(".placeholder").show();
$(".placeholder").css({
"margin-top": "0px",
"font-size": "11px"
});
});
.textBox {
height: 50px;
}
.textBox input {
border: none;
border-bottom: 1px solid black;
margin-top: 20px;
}
.textBox input:focus {
outline: none;
border-bottom: 1px solid #00B9F5;
}
.textBox input:focus::-webkit-input-placeholder {
color: white;
}
.placeholder {
display: none;
position: absolute;
color: #00B9F5;
margin-top: 20px;
-webkit-transition: font-size 1s linear, margin-top 1s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textBox">
<span class="placeholder">Enter your name</span>
<input type="text" name="name" placeholder="Enter your name">
</div>
我希望占位符在 paytm 登录字段中发生动画。过渡没有发生。有什么建议吗?
最佳答案
您正在使用 -webkit-
前缀进行转换;仅适用于 Chrome 和 Safari。 transition
现在得到了很好的支持,afaik。
$(".textBox input").on("focus", function() {
$(".placeholder").css({
opacity: 1,
"margin-top": "0px",
"font-size": "11px"
});
$(this).attr("placeholder", "");
});
.textBox {
height: 50px;
}
.textBox input {
border: none;
border-bottom: 1px solid black;
margin-top: 20px;
}
.textBox input:focus {
outline: none;
border-bottom: 1px solid #00B9F5;
}
.textBox input:focus::-webkit-input-placeholder {
color: white;
}
.placeholder {
opacity: 0;
pointer-events: none;
position: absolute;
color: #00B9F5;
margin-top: 20px;
transition: .5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textBox">
<span class="placeholder">Enter your name</span>
<input type="text" name="name" placeholder="Enter your name">
</div>
关于javascript - 使用 css3 过渡字体大小和边距顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41285471/