html - 如何将 Bootstrap 输入文本框样式更改为行？

Question

我在 laravel 中使用 bootstarp css 工作。现在我需要将输入文本框样式更改为线条.... 这是我的 Bootstrap 输入文本框

<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;
}

行来了，但 Bootstrap 输入框样式仍然存在。如何删除 Bootstrap 样式并将我的输入框设为行

Answer 1

试试这个:

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;
}

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

:focus 规则是当输入控件获得焦点时只有下划线改变颜色，否则您仍然会看到默认的“发光”。