Html 如何将引导程序输入文本框样式更改为行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44656269/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to change bootstrap input text box style to line?
提问by flex
I am working in laravel with bootstarp css. now I need change input text box style to line.... this is My bootstrap input text box
我正在使用 bootstarp css 在 laravel 中工作。现在我需要将输入文本框样式更改为 line.... 这是我的引导输入文本框
<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>
I wrote css file as follow
我写的css文件如下
#input {
background: transparent;
border: none;
border-bottom: 1px solid #000000;
}
line is come but bootstrap input box style is still there. how can remove bootstrap style and make My input box as line
行来了，但引导输入框样式仍然存在。如何删除引导程序样式并使我的输入框作为行
回答by Conan
Try this:
尝试这个：
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>The :focusrule is so that only the underline changes colour when the input control is focused, otherwise you'll still see the default blow 'glow'.
该:focus规则是这样只有下划线颜色变化，当输入控制的重点，否则你还是会看到默认的打击“发光”。
回答by dbrree
input is targeting an id named input(which I don't see in your code).
input 的目标是一个名为 input 的 id（我在你的代码中没有看到）。
You need to target input itself by removing the #, or... change #input to #name since that is the actual id.
您需要通过删除# 来定位输入本身，或者...将#input 更改为#name，因为这是实际的ID。
回答by XYZ
Change #inputin css to #name.In your html the id for input is gives as name
将#inputcss更改为#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>