ブートストラップ：ボーダーフォームを削除する方法は？

は私がブートストラップ：ボーダーフォームを削除する方法は？

しかし、私はブートストラップフォームがあり、デフォルトの灰色の境界線を削除することはできません映像ショー（ちょうど下線）などの類似したフォームのスタイルを取得するには、デフォルトのブートストラップのフォームのスタイルを変更しようとしています。どうすれば削除できますか？（コードに添付してください）

要約すると、私は赤いボトムラインを維持し、私のコードの灰色のラインを削除したいと思います。

おかげ

.form-control { 
 
    background-color: transparent !important; 
 
    background-image: none !important; 
 
\t border-bottom-color:red !important; 
 
\t border-bottom-style:solid !important; 
 
\t border-bottom-width:1px !important; 
 
\t 
 
    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"> 
 
\t 
 
    <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> 
 

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

出典

2016-08-12 Anonymous

フォームコントロール国境に次のCSSを追加します！固体1pxの赤が重要。 border-width：0 0 1px 0！重要;

.form-control { 
 
    border: solid 1px red !important; 
 
    border-width: 0 0 1px 0 !important; 
 
    background-color: transparent !important; 
 
    background-image: none !important; 
 
\t 
 
    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"> 
 
\t 
 
    <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> 
 

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

出典

2016-08-12 09:06:41 z0mBi3

それは働く！どうもありがとうございました。問題がどこにあるのか教えていただけますか？ –

** 方法-1：直接更新ブートストラップクラス**

.form-control 
{ 
    border:none !important 
}

出典

2016-08-12 09:03:28

こんにちは返事をありがとうございました。しかし、それは動作しません。私はまだ赤い線（私はそれが欲しい）と灰色の線を持っています。とにかくありがとうございます。 –

私は自分の答えを更新しました。それを試してみてください。より多くのクエリは、コメントを入れて –

ありがとう。 :)解決済み –

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>

出典

2016-08-12 09:04:40 Sankar

ありがとうございました！ :) –

ブートストラップ：ボーダーフォームを削除する方法は？

答えて

関連する問題