网页搜索框实现
2018-12-05 本文已影响0人
Game0ver
趁着热情未减，赶紧的写下自己的第一篇简书。今天要分享的是如何利用 html + css 写出一个令自己满意的搜索框。说来忏愧，刚学 html 的时候，被这个问题困惑了许久，一直未得到解决。
下面是基本思路：
首先定义一个 div 来包住 input 和 button，然后给 div 一个边框，input 和 button 均设为无边框，随后利用相对定位把 button 定位到 div 的最右端，然后便可以得到下图的效果了：
效果图
下面附上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的搜索页</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
/* 名称 */
.title{
text-align: center;
font-size: 25px;
font-weight: bold;
color: cadetblue;
margin-top: 100px;
margin-bottom: 20px;
font-family: fantasy;
}
/* 下面是搜索框样式 */
.searchBox{
width: 40%;
height: 35px;
border: 1px solid cadetblue;
outline: hidden;
border-radius: 2px;
margin: 0 auto;
position: relative;
}
.inputBox{
border: none;
width: 84%;
height: 35px;
line-height: 35px;
outline: none;
padding-left: 10px;
/* 改变光标的颜色 */
caret-color:#008B8B;
font-size: 14px;
}
.searchBtn{
width: 65px;
height: 35px;
border: none;
position: absolute;
right: 0;
outline: none;
color: white;
font-size: 15px;
background-color: cornflowerblue;
}
/* 鼠标滑过按钮时背景色改变 */
.searchBtn:hover{
background-color: #497fdf;
}
</style>
</head>
<body>
<div class="title">
<p>I tell you</p>
</div>
<div class="searchBox">
<input class="inputBox" placeholder="I will tell you all you want to know!">
<button class="searchBtn">搜索</button>
</div>
</body>
</html>
2018-12-7 增加了改变光标样式样式和鼠标滑过搜索按钮时背景色改变功能
