html - 更改搜索框的宽度和高度

标签 html css twitter-bootstrap search-box

搜索框在栏上的宽度太小(使用栏而不是导航栏来自定义它)。如何使搜索栏更宽?另外,如何更改搜索框的高度关于屏幕顶部?

<div  class="bar navbar-inverse navbar-fixed-top">
    <div class="container">
        <span id="logo">  
            <a href="main.php">XYZ</a>
        </span>
        <span  class="col-xs-5 right-inner-addon has-feedback">
               <form class="form-inline" role="form">
                 <div class="form-group has-feedback">
                 <label class="control-label" for="inputSuccess4"></label>
                 <input type="text" class="form-control" id="inputSuccess4">
                 <span class="glyphicon glyphicon-search form-control-feedback"></span>
                 </div>
               </form>             
        </span>
    </div>   
</div>

    .right-inner-addon {
        padding-top: 5px;
        padding-left:30px;
        position: relative;
    }
    .right-inner-addon input {
    width: 500px;
    height: 30px;
    padding: 0px 5px;
}
    .right-inner-addon i {
        position: absolute;
        right: 0px;
        padding: 10px 6px;
        pointer-events: none;
    }

最佳答案

form-control 的样式中添加 width= *insert width here*。这应该有效

关于html - 更改搜索框的宽度和高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23572535/

相关文章:

html - wordpress:粘性菜单直到稍后才粘在滚动上

css - 使用JS + SVG版本时,Font Awesome 5显示空白方 block

jquery - 如何使用 Jquery 内联编辑 HTML 表格单元格

html - 为什么相对定位元素从窗口的顶 Angular 开始?

html - 如何让这个 SVG 图形自动适应它的容器?

html - 将提交按钮和输入文本放在同一行

javascript - 在 Bootstrap 选项卡中运行 Nicescroll 滚动条

css - 为什么 Bootstrap 会覆盖我的自定义 CSS?

javascript - 过滤AngularJS中的数组值

html - 如何正确对齐 html/css 中的首字下沉?