input 获取焦点后样式的修改

最新推荐文章于 2024-07-06 10:50:45 发布

 梦晓天明

最新推荐文章于 2024-07-06 10:50:45 发布

阅读量578

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/tigerwxm630/article/details/134970255

版权

一、实现目标
1.没有获取焦点时样子
默认显示
2.获取焦点时
在这里插入图片描述
代码：

<input  
	class="input"
	placeholder="请输入关键字" 
	@input="loadNode"
/>

css

.input {
    border-radius: 14px;
    border:1px solid #e4e4e4;
    margin: 5px;
    margin-top: 10px;
    width: 95%;
    height: 28px;
    font-size: 12px;
    font-weight: normal;
    color: #333333;
    font-family: '微软雅黑';
    
}
/* 修改input占位符样式 */
.input::placeholder {
    padding-left: 5px;
    box-sizing: border-box;
    color: #CCCCCC;
}
/* WebKit, Blink, Edge浏览器，带input，双冒号 */
.input::-webkit-input-placeholder{ 
    padding-left: 5px;
    box-sizing: border-box;
    color: #CCCCCC;
}
/* 火狐浏览器高版本（19+），不用带input，双冒号 */
.input::-moz-placeholder{ 
    padding-left: 5px;
    box-sizing: border-box;
    color: #CCCCCC;
}
/* 火狐浏览器底版本（4 to 18），不用带input，单冒号 */
.input:-moz-placeholder{ 
    padding-left: 5px;
    box-sizing: border-box;
    color: #CCCCCC;
}
/* IE浏览器底版本（10-11），带input，单冒号 */
.input:-ms-input-placeholder{  
    padding-left: 5px;
    box-sizing: border-box;
    color: #CCCCCC;
}
/* 修改input获取焦点后的样式 */
.input:focus{
    box-shadow: 0px 0px 5px 0px rgba(64, 159, 255,0.25);
    border:none;
    outline:1px solid #409EFF
}
/* 修改input获取焦点后占位符消失 */
.input:focus::-webkit-input-placeholder{
    color:transparent;
}