- 1）没有边框
input{
border: none;
outline-style: none;
}
推荐使用： border: 0 none; -->兼容性好
- 例子
<head>
<meta charset="utf-8">
<style type="text/css">
input{
border: none; //去边框
outline-style: none; //去边框
}
.username{
border: 1px solid red;
background-color: pink;
}
.username:focus{
background-color: yellowgreen; //点击边框会变颜色
}
.email{
border-bottom: 1px dotted black;
}
.search{
border: 1px solid black;
background-image: url("search.png");
background-repeat: no-repeat; //图片不重复
background-position: right; //搜索图片放在右边
}
</style>
</head>
<body>
用户名：<input type="text" class="username">
<br/>
邮箱：<input type="text" class="email">
<br/>
搜索：<input type="text" class="search">
</body>
- 2)点击“用户名：”就会选中的输入框
<label for="usernme">
用户名:
</label>
<input type="text" class="usernme" id="usernme">