Bootstrap：如何删除边框形式？答案

【问题标题】：Bootstrap: How to delete the border form?Bootstrap：如何删除边框形式？
【发布时间】：2016-08-12 09:00:22
【问题描述】：

我正在尝试更改默认的 Bootstrap 表单样式以获得类似图片显示的表单样式（只是一个下划线）

但是，我无法删除 Bootstrap 表单具有的默认灰色边框。我怎样才能删除它。（请在这篇文章中找到代码）

综上所述，我想保留红色底线并删除我的代码的灰色线。

谢谢

.form-control {
    background-color: transparent !important;
    background-image: none !important;
	border-bottom-color:red !important;
	border-bottom-style:solid !important;
	border-bottom-width:1px !important;
	
    border-radius: 0 !important;
    box-shadow: 0 !important;
    display: block !important;
    font-size: 15px !important;
    height: 45px !important;
    line-height:  1!important;
    padding: 5px 20px 20px 14px;
    width: 100%;
}

<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
<body>
<!-- form -->
<div class="container"> 
<div class="row">
	
    <div style="margin-top:70px; padding-right:26px; padding-left:78px " class="col-md-6 mb_40">
    
<form  class="form-horizontal">
<fieldset>


<!-- Name input-->
<div class="form-group row">
  <div class="col-md-6">
  <input id="Name" name="Name" type="text" placeholder="Name" class="form-control input-md" required="">
  </div>
<!-- Email input-->
  <div class="col-md-6">
  <input id="email" name="email" type="text" placeholder="Email" class="form-control input-md" required="">
  </div>
</div>

<!-- Subject input-->
<div class="form-group">
  <div class="col-md-12">
  <input id="Subject" name="Subject" type="text" placeholder="Subject" class="form-control input-md" required="">
  </div>
</div>

<!-- Textarea -->
<div class="form-group">
  <div class="col-md-12">                     
    <textarea class="form-control" id="Message" name="Message">Message</textarea>
  </div>
</div>

</fieldset>
<div class="col-md-12">
<div class="row">
<button style="padding-right:20px; padding-left:20px" type="submit" class="btn btn-black">Send</button>
<div class="g-recaptcha pull-right" data-sitekey="6Le_VicTAAAAAN1XKkiFpdQGDugyzdALXKEnBSaz"></div>
</div>
</div>
</form>

	</div>
    
</div>
</div>
<!-- /.form--></body>
</html>

【问题讨论】：

标签： html css forms twitter-bootstrap twitter-bootstrap-form

【解决方案1】：

将以下css添加到form-control 边框：实心 1px 红色！重要；边框宽度：0 0 1px 0 !important;

.form-control {
    border: solid 1px red !important;
    border-width: 0 0 1px 0 !important;
    background-color: transparent !important;
    background-image: none !important;
	
    border-radius: 0 !important;
    box-shadow: 0 !important;
    display: block !important;
    font-size: 15px !important;
    height: 45px !important;
    line-height:  1!important;
    padding: 5px 20px 20px 14px;
    width: 100%;
    box-shadow: none !important;
}

<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
<body>
<!-- form -->
<div class="container"> 
<div class="row">
	
    <div style="margin-top:70px; padding-right:26px; padding-left:78px " class="col-md-6 mb_40">
    
<form  class="form-horizontal">
<fieldset>


<!-- Name input-->
<div class="form-group row">
  <div class="col-md-6">
  <input id="Name" name="Name" type="text" placeholder="Name" class="form-control input-md" required="">
  </div>
<!-- Email input-->
  <div class="col-md-6">
  <input id="email" name="email" type="text" placeholder="Email" class="form-control input-md" required="">
  </div>
</div>

<!-- Subject input-->
<div class="form-group">
  <div class="col-md-12">
  <input id="Subject" name="Subject" type="text" placeholder="Subject" class="form-control input-md" required="">
  </div>
</div>

<!-- Textarea -->
<div class="form-group">
  <div class="col-md-12">                     
    <textarea class="form-control" id="Message" name="Message">Message</textarea>
  </div>
</div>

</fieldset>
<div class="col-md-12">
<div class="row">
<button style="padding-right:20px; padding-left:20px" type="submit" class="btn btn-black">Send</button>
<div class="g-recaptcha pull-right" data-sitekey="6Le_VicTAAAAAN1XKkiFpdQGDugyzdALXKEnBSaz"></div>
</div>
</div>
</form>

	</div>
    
</div>
</div>
<!-- /.form--></body>
</html>

【讨论】：

它有效！非常感谢你。你能告诉我问题出在哪里吗？

【解决方案2】：

设置Border:0px，然后设置Border-bottom-width。这就是你所需要的。

.form-control {
  background-color: transparent !important;
  border: 0px solid !important;
  border-radius: 0 !important;
  background-image: none !important;
  border-bottom-color: red !important;
  border-bottom-style: solid !important;
  border-bottom-width: 1px !important;
  box-shadow: none !important;
  display: block !important;
  font-size: 15px !important;
  height: 45px !important;
  line-height: 1!important;
  padding: 5px 20px 20px 14px;
  width: 100%;
}

<!doctype html>
<html lang="en">

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
  <!-- form -->
  <div class="container">
    <div class="row">

      <div style="margin-top:70px; padding-right:26px; padding-left:78px " class="col-md-6 mb_40">

        <form class="form-horizontal">
          <fieldset>


            <!-- Name input-->
            <div class="form-group row">
              <div class="col-md-6">
                <input id="Name" name="Name" type="text" placeholder="Name" class="form-control input-md" required="">
              </div>
              <!-- Email input-->
              <div class="col-md-6">
                <input id="email" name="email" type="text" placeholder="Email" class="form-control input-md" required="">
              </div>
            </div>

            <!-- Subject input-->
            <div class="form-group">
              <div class="col-md-12">
                <input id="Subject" name="Subject" type="text" placeholder="Subject" class="form-control input-md" required="">
              </div>
            </div>

            <!-- Textarea -->
            <div class="form-group">
              <div class="col-md-12">
                <textarea class="form-control" id="Message" name="Message">Message</textarea>
              </div>
            </div>

          </fieldset>
          <div class="col-md-12">
            <div class="row">
              <button style="padding-right:20px; padding-left:20px" type="submit" class="btn btn-black">Send</button>
              <div class="g-recaptcha pull-right" data-sitekey="6Le_VicTAAAAAN1XKkiFpdQGDugyzdALXKEnBSaz"></div>
            </div>
          </div>
        </form>

      </div>

    </div>
  </div>
  <!-- /.form-->
</body>

</html>

【讨论】：

【解决方案3】：

** Method-1 :直接更新引导类**

.form-control
{
  border:none !important
}

【讨论】：

您好，感谢您的回复。但这不起作用。我仍然有红线（我想要它）和灰线。不过还是谢谢你。
我已经更新了我的答案。请尝试一下。进一步查询所以发表评论