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

Question

我正在使用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;
}

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

Answer 1

试试这个：

＆＃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;

Answer 2

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

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

Answer 3

将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>