一个css查询输入框的样式的总结-前端-IT技术博客

一个css查询输入框的样式的总结

时间:2019-12-17 10:33:52 浏览: 字体: 放大 缩小


一个自己做的查询输入框的样式,作一个总结,效果图如下:

微信截图_20191217103503.png

样式结构:

一个span,一个input,一个button,代码如下面

<div class="search">
    <span>字典</span>
    <input type="text" name="" id="" required>
    <input type="button" name="" value="提交" id="" class="btn">
</div>

样式:

<style type="text/css">
.search {
width: 50%;
height: 40px;
margin: 5px auto;
}

.search span {
display: block;
width: 50px;
height: 36px;
color: white;
float: left;
background-color: green;
border: 2px solid green;
line-height: 32px;
font-size: 16px;
text-align: center;
font-weight: 600;
}

input {
border: 2px solid green;
height: 34px;
float: left;
line-height: 32px;
font-size: 16px;
}

.btn {
background-color: green;
height: 40px;
color: white;
border: 2px solid green;
float: left;
width: 45px;
line-height: 32px;
font-size: 16px;
}
</style>


标签: CSSbuttoninput