CODEWITHSUNDEEP
csstwitter-bootstrap
user687554
user687554

Reputation: 11151

Bootstrap - Remove Input Control lines

I have a web page that uses Bootstrap 3. In this page, I have an input field. I am trying to make it so only the bottom border of the input field is visible. However, as you can see in this Fiddle I've created, I've been unable to remove the left, right, and top borders. Currently, I'm using the following CSS:

.my-input-field {
  border-top:0px; 
  border-right:0px; 
  border-left:0px;
  border-bottom:1px solid #2d2d2d;
  outline:none;
}

.my-input-field:focus {
  outline:none;
}

But, there is still a slight shadow or something around the input box. How do I remove that shadow or border around the control. I can't figure out what it is or what's causing it.

Thank you for your help.

Upvotes: 0

Views: 67

Answers (4)

mostafa alaeddin
mostafa alaeddin

Reputation: 1

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {   
  border-color: rgba(126, 239, 104, 0.8);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
  outline: 0 none;
}
<!doctype html>
<html lang="fa" dir="rtl">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css"
        integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

    <title>something</title>

    <!--style-->
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
    
</head>

<body>
    
    
    <div class="container">
        <div class="row">
          <div class="col-md-12">
            <input class="form-controll form-controll-sm">
          </div>
        </div>
    </div>
   
    
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

</body>

</html>

Upvotes: 0

Med
Med

Reputation: 2802

You can remove form-control from your class and use only .my-input-field, any way this is the solution: 

.my-input-field:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}

Upvotes: 0

claudios
claudios

Reputation: 6656

Yeah, simply add the box-shadow: none; and I just added an extra feature here that removes the blue glow around the box on focus. See the code below:

.my-input-field {
  border-top:0px; 
  border-right:0px; 
  border-left:0px;
  border-bottom:1px solid #2d2d2d;
  outline:none;
  box-shadow: none;
}

.my-input-field:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}

Upvotes: 0

paolobasso
paolobasso

Reputation: 2018

Add box-shadow:none;, this solve your problem because the border that you see is just a CSS3 shadow and not a solid border.

Updated DEMO.

If you want to know more about box-shadow read this.

Upvotes: 1

Related Questions