如何将引导程序输入文本框样式更改为行？

Question

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

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

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

原文由 flex 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 规则是当输入控件聚焦时只有下划线改变颜色，否则你仍然会看到默认的“发光”。

原文由 Conan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

input 的目标是一个名为 input 的 id（我在你的代码中没有看到）。

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

原文由 dbrree 发布，翻译遵循 CC BY-SA 4.0 许可协议