jquery - 创建按钮和文本框，例如 Google 网页

Question

如何创建在谷歌搜索、谷歌加和谷歌播放等谷歌网页中的轻量级按钮和文本框。我正在使用 JSP 和 css.. 我准备好使用 jQuery.. 请按需要这样做。提前致谢..

Answer 1

请参阅.. 示例 http://purecss.io/ 可能对您有用....

Answer 2

要创建像 Google 搜索这样的按钮，您可以使用此代码来创建不同的按钮。 将此代码用作 html 代码

  <div class="input-box">
        <input type="text" value="" placeholder="search text here" class="input-1" />
        <input type="submit" value=" OK " class="input-2" />
    </div>

用这个作为css

.input-1, .input-2{
    display: inline-block;
    height: 100%;
    margin: 0;
    padding: 0;
    float: left;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
.input-1{
    width: 70%; /* input-1 + input-2 = 100% */
}
.input-2{
    width: 30%; /* input-1 + input-2 = 100% */
}
.input-box{
    height: 32px; /* Own value - full height */
    width: 200px; /* Own value - full width */
}