使用组合的输入和选择字段格式化引导程序内联搜索表单

时间:2016-03-05 14:12:46

标签: html css forms twitter-bootstrap

我正在尝试创建一个类似于在eBay上找到的搜索表单 enter image description here

使用bootstrap。我想结合我的输入和选择字段,以便它们看起来像eBay搜索栏中的输入和选择字段,但我似乎无法格式化它使它看起来像它。 这就是我到目前为止所做的:

<form class="form-inline text-center" style="padding-top:50px" role="form" method="get" action="addauction.php">
<fieldset style="padding-top:50px">
    <!-- Search Name -->
    <div class="form-group">
        <label class="sr-only" for="item-name">Product Name</label>
            <input id="item-name" name="item-name" placeholder="Product Name" class="form-control">
    </div>
    <!-- Search Category -->
    <div class="form-group">
        <label class="sr-only" for="item-category">Product Category</label>
            <select id="item-category" name="item-category" class="form-control">
                <option selected disabled hidden>Category</option>
                <?php
                $sql = 'SELECT * FROM Category';
                foreach ($db -> query($sql) as $row) { ?>
                <option value = "<?php echo $row['category_id']; ?>"><?php echo $row['category']; ?></option>
                <?php } ?>
            </select>
    </div>
    <!-- Search Auction -->
    <div class="form-group">
        <label class="sr-only" for="submit">Ready to Submit?</label>
            <button type="submit" class="btn btn-primary"><span
                    class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
    </div>
</fieldset>
</form>

这就是它的样子: enter image description here

https://jsfiddle.net/DTcHh/17749/

我一直在阅读有关使用输入组的内容,但是从我收集到的内容来看,它更难以获得所选值。任何有关如何通过修改HTML或CSS来修改我的代码以使其看起来像eBay搜索表单的帮助都将深受赞赏。

提前致谢!

0 个答案:

没有答案