css - 自定义搜索栏和响应式网格

Question

我找到了很棒的文章 http://www.tripwiremagazine.com/2012/01/how-to-create-a-seach-bar-in-photoshop.html最近。不知道如何处理响应式网格中的背景图像。如何使用 Zurb Foundation 网格制作这样的搜索栏？是否可以？

谢谢!

Answer 1

设计中的搜索栏可以完全使用 CSS 设置样式，这样您就根本不必使用背景图片。以下是使这项工作有效的几个主要代码点:

HTML:

<div class="input-container">
     <input type="text" />
     <button>Search</button>
</div>

文本输入:

input[type="text"] {
    box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
    border-radius: 5px;
    background-color: #fff;
}

按钮:

button {
    margin-left: -10%;
    background-image: -webkit-linear-gradient(top, #117a03 0%,#287c15 100%);
    border-radius: 0 5px 5px 0;
    height: 32px;
    padding: 0 5px;
    border: 1px solid #bbb;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.3), 0 1px #fff;
    color: #074F03;
    text-shadow: 0px 1px #ccc;
    font-weight: bold;
}

您需要为 CSS3 属性添加供应商前缀，但这是一个非常基本的起点，应该会为您提供所需的一切。这是一个可以正常工作的 fiddle :http://jsfiddle.net/J6Dvz/