SashayAway SashayAway - 3 months ago 22
CSS Question

Bootstrap: How to delete the border form?

I am trying to change the default Bootstrap form style to get a similar form style like the picture show (just a underline) form

However, I can't delete the default grey bored that the Bootstrap form has. How can I delete it. (Please find attached to this post the code)

To sum up, I would like keep the red bottom line and delete the grey lines of my code.

Thanks



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




Answer

Add the following css to form-control border: solid 1px red !important; border-width: 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>

Comments