侧边栏壁纸
博主头像
liveJQ博主等级

沒有乐趣,何来开始

  • 累计撰写 146 篇文章
  • 累计创建 60 个标签
  • 累计收到 2 条评论
Web

用HTML5和CSS3实现站内搜索栏

liveJQ
2018-08-21 / 0 评论 / 0 点赞 / 637 阅读 / 1,952 字 / 正在检测是否收录...
广告 广告

此搜索栏采用的是表单的一些标签,基本的代码如下:

<div id="search">
    <form action="results.php" method="post"><input name="searchterm" type="search" placeholder="站内搜索"><select
            name="searchtype">
            <option value="全部分类">全部分类</option>
            <option value="书名">书名</option>
            <option value="作者">作者</option>
            <option value="ISBN">ISBN</option>
        </select><input name="submit" type="submit" value="" style="width:2.5em;"></form>
</div>

因为涉及到了块元素,所以input标签与select标签不能转行;

CSS3的基本代码如下:

#search {
    position: absolute;
    top: 111px;
    left: 670px;
    text-align: right;
    border: 3px solid #cc6600;
}

#search input[type="search"] {
    font-family: "微软雅黑";
    background: #f3f3f3;
    height: 25px;
    width: 170px;
    font-size: 1.6em;
    padding-left: 5px;
    display: inline-block;
    vertical-align: top;
    border: none;
}

select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border: none;
    background: url("images/arrow.png") no-repeat scroll right center transparent;
    background-color: #d2d2d2;
    padding-right: 14px;
    height: 25px;
}

select::-ms-expand {
    display: none;
}

#search input[type^="submit"] {
    background-color: #cc6600;
    height: 25px;
    display: inline-block;
    border: none;
    vertical-align: top;
    padding: 0 5px;
    background-image: url("images/search.png");
    background-position: center;
    background-repeat: no-repeat;
}

#search input[type^="submit"]:hover {
    cursor: pointer;
}

#search input[type^="submit"]:active {
    background-color: #996600;
}

做这种东西,最重要的是头脑清晰,条理分明,按部就班的来,不能急。

按由外到内的顺序,先设置div整体为绝对位置进行移动;然后可以对搜索框内的placeholder设置字体、位置等细节,最重要的是将其整体input设置为块元素,顶部对齐;
在这里,我清除了select默认的设置,并对其进行个性化,加上-moz-appearance:、-webkit-appearance:这些是因为这些像火狐等的浏览器对select都有默认的样式修饰,然后给个背景图,height都设置成一样的,select::-ms-expand写不写没太大影响;
确定提交框,要想达到很好的视觉和触觉效果是比较不容易的。鼠标指向时要有鼠标样式的变化,提交框边界也得有,点击的时候要有凹陷,释放的时候要有回弹等大部分都可以用颜色变化和边界样式搞定,在这里就不一一细说啦!

我做出来的效果如下:

20180821_search_field.png

0

评论区