Html
    Css
    Js

    
                        
.input input {
	/* height:30px;
	float:left;
	*/
    outline:none;
	width:120px;
	border:none;
	background:none;
	border-bottom:.1rem solid rgb(0,153,254);
	color:rgba(0,153,204,0.84);
	font-size:1rem;
}
.input::after {
	content:attr(aria-placeholder);
	position:absolute;
	left:0;
	top:-20%;
	font-size:1.1rem;
	color:rgba(0,153,204,0.66);
	transition:.3s;
}
.input.focus::after {
	top:-70%;
	font-size:1rem;
}
.input {
	position:relative;
	opacity:1;
	width:100%;
	margin:2rem 0 0;
	height:42px;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

简洁过渡输入框

更新时间:2020-09-08 00:41:47

在谷歌浏览器下 点击提示文字和横线都会使得文字上升,但在其他浏览器仅点击横线时提示文字会上升,浏览器兼容问题尚未解决,望指教。

0