CSS input 去除默认和聚焦边框、添加自定义前缀效果

最新推荐文章于 2023-11-06 11:45:53 发布

AvatarGiser

最新推荐文章于 2023-11-06 11:45:53 发布

阅读量1.9k

点赞数

分类专栏： CSS 小知识点

本文链接：https://blog.youkuaiyun.com/sinat_31213021/article/details/116239292

版权

CSS 小知识点专栏收录该内容

37 篇文章

订阅专栏

一、原始样式

html

<input type="text" >

效果

二、去除边框

input{
    /* 去除默认边框 */
    border:none; 
    /* 去除选中或聚焦边框 */
    outline: none;
}

css

图中白色就是input聚焦时的效果，为了效果清晰，添加了灰色背景。

3、添加前缀

html

<div class="input-div">
    <img :src="require('@images/filter.png')" alt="" srcset="">
    <input type="text" name="" id="" placeholder="搜索" v-model="filter">
</div>

css

.input-main {
    padding: 20px;   
    background: #ccc; 
}
.input-div {
    width: 290px;
        height: 32px;
        background: rgba(34, 68, 114, 0.9);
        margin-top: 16px;
        margin-left: 12px;        
}
img{
    vertical-align:middle;
    margin: 2px 8px;
}
input{
    width: 258px;
    height: 32px;
    /* 去除默认边框 */
    border:none; 
    /* 去除选中或聚焦边框 */
    outline: none;
    background: rgba(0, 0, 0, 0);
}

效果