Question

我正在尝试将三个表单元素（输入，选择和提交）组合到一个单独的搜索栏中，很明显我正在尝试从这个jsfiddle做什么：

HTML：

<div class="form-wrap">
   <form action="/search" method="get">
     <input type="text" name="q" placeholder="Search..." required class="search-box">
        <select>
        <option selected>All countries</option>
        <option>Australia</option>
        <option>Denmark</option>
        <option>USA</option>
        </select>
        <input type="button" value="Search" class="search-button">
    </form>
</div>

的CSS：

/* combo search box */

form {
    margin:50px auto;
}

.form-wrap {
    display: inline;
}
.search-box {
    width:150px;
    padding:8px 15px;
    background:rgba(50, 50, 50, 0.2);
    border:2px solid #8FD926;
    font-size: 28px;
    display: inline-block;
}
.search-button {
    position:relative;
    padding:6px 15px;
    left:-8px;
    border:2px solid #8FD926;
    background-color:#8FD926;
    color:#fafafa;
    font-size: 28px;
    display: inline-block;
}
.search-button:hover  {
    background-color:#fafafa;
    color:#8FD926;
}

select {
    width:120px;
    padding:8px 15px;
    background:rgba(50, 50, 50, 0.2) url({% static 'images/caret.png' %}) no-repeat right center;;
    border:2px solid #8FD926;
    height:50px;
    font-size: 12px;
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    display: inline-block;
}

（我知道我的css重复，我打开包装进行测试）。

万一有任何疑问，你可以在这里看到一个有效的例子：http://www.opencorporates.com

我只想坚持使用CSS并避免使用javascript（如果可能的话）。

Answer 1

由Paulie_D提供：

<div id="load">
    <div id="GEN">
        <a class="venobox_custom" id="overlay" scrolling="no" data-type="iframe" href="Songs/1.html">
            <img class="img-responsive" id="img" src="img.jpg">
        </a>
        text
    </div>

    <script type="text/javascript" src="venobox/venobox.min.js"></script>
    <link rel="stylesheet" href="venobox/venobox.css" type="text/css" media="screen" />

    <script>
        $(document).ready(function () {

            /* default settings */
            $('.venobox').venobox();

            /* custom settings */
            $('.venobox_custom').venobox({
                framewidth: '100%',        // default: ''
                frameheight: '',       // default: ''
                border: '5px',             // default: '0'
                bgcolor: '#000',         // default: '#fff'
                titleattr: 'data-title',    // default: 'title'
                numeratio: true,            // default: false
                infinigall: true            // default: false
            });

            $("#firstlink").venobox().trigger('click');
        });
    </script>

CSS连接表单输入，选择并将元素提交到单个框中

1 个答案: