Reputation: 11151
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
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
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
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
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