如何将bootstrap输入文本框样式更改为行?

时间:2017-06-20 14:46:00

标签: html css twitter-bootstrap

我正在使用bootstarp css在laravel中工作。现在我需要改变输入文本框样式到行.... 这是我的自举输入文本框

<div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
                <label for="name" class="control-label">Name</label>
                <input type="text" name="name" class="form-control" id="name" value="{{ old('name') ?: '' }}">
                @if ($errors->has('name'))
                    <span class="help-block">{{ $errors->first('name') }}</span>
                @endif
            </div>

我写了css文件如下

#input {
    background: transparent;
    border: none;
    border-bottom: 1px solid #000000;
}

线已到,但引导输入框样式仍然存在。如何删除引导程序样式并将我的输入框设为行

3 个答案:

答案 0 :(得分:6)

试试这个:

&#13;
&#13;
html {
  /* for demo purposes only */
  margin: 2em;
}

input[type="text"],
select.form-control {
  background: transparent;
  border: none;
  border-bottom: 1px solid #000000;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 0;
}

input[type="text"]:focus,
select.form-control:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}
&#13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="form-group">
  <label for="name" class="control-label">Name</label>
  <input type="text" name="name" class="form-control" id="name" value="test">
</div>

<div class="form-group">
  <label for="dropdown-test" class="control-label">Dropdown test</label>

  <select class="form-control" name="dropdown-test">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
</div>
&#13;
&#13;
&#13;

:focus规则是这样的,当输入控件被聚焦时,只有下划线会改变颜色,否则你仍然会看到默认的打击&#39;发光&#39;

答案 1 :(得分:2)

输入的目标是一个名为input的id(我在代码中看不到)。

您需要通过删除#或...来更改#input到#name来定位输入本身,因为这是实际的ID。

答案 2 :(得分:1)

将css中的#input更改为#name。在您的html中,输入的ID为name

#name {
    background: transparent;
    border: none;
    border-bottom: 1px solid #000000;
    outline:none;
    box-shadow:none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group ">
                <label for="name" class="control-label">Name</label>
                <input type="text" name="name" class="form-control" id="name" value="">
            
            </div>