關(guān)鍵點:
/* 關(guān)鍵點,讓輸入框無邊框 */
outline:none;
border:none;
1.效果圖
文章來源地址http://www.zghlxwxcb.cn/news/detail-819057.html
2.html
<div class="container">
<input type="text" placeholder="請輸入用戶名">
<input type="text" placeholder="請輸入密碼">
</div>
3.css
.container input{
width: 100%;
height: 7vh;
/* 關(guān)鍵點,讓輸入框無邊框 */
outline:none;
border:none;
border-bottom: 1px solid #ccc;
}
/* 修改placeholder默認(rèn)樣式 */
.container input::-webkit-input-placeholder {
/* padding-left: 5px; */
font-size: 16px;
color: gray;
}
文章來源:http://www.zghlxwxcb.cn/news/detail-819057.html
到了這里,關(guān)于前端使用css去除input框的默認(rèn)樣式的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!