Adding a border to input with Bootstrap - html

Question

I am currently working on a website with a complex CSS file. I have added a new feature, but I can't seem to edit an input tab that I have due to other styling affecting it. Essentially I am trying to over-ride a certain property.
CSS
textarea, input[type="number"]{
background-color: #ffffff;
border: 0 solid #CCCCCC;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.035) inset;
transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
select, input[type="number"] {
border-radius: 2px 2px 2px 2px;
color: #555555;
display: inline-block;
height: 37px;
font-size: 14px;
line-height: 15px;
margin-bottom: 0px;
padding: 2px 6px;
vertical-align: middle;
}
select, textarea, input[type="number"]
color: #626c72;
display: inline-block;
font-size: 14px;
line-height: 20px;
margin-bottom: 10px;
padding: 4px 6px;
vertical-align: middle;
box-shadow: 1px 1px 8px rgba(0,0,0,0.05);
width: 100%;
}
.target {
border: 0;
}
HTML
<div class="container">
<div class="row">
<div class="form-group col-sm-6">
<label for="Label1">Label1:</label>
<input class="form-control target" step="any" type="number" min="0" max="24"></input>
</div>
</div>
</div>
What I am trying to do is have is override border: 0 solid #CCCCCC; from the first selector and make it look like the default bootstrap input for the .target input . I don't want it to affect all other inputs in my application. I only want it to affect the html you see above. I thought my last styling .target selector would do the trick, but it doesn't. My jsFiddle is here. I want the default bootstrap border/outline for my input. As you can tell its not there right now.

Answer 1

You can use the CSS :not selector if you don't want your custom CSS to apply to that specific input:
textarea, input[type="number"]:not(.target) {
background-color: #ffffff;
border: 0 solid #CCCCCC;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.035) inset;
transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
select, input[type="number"]:not(.target) {
border-radius: 2px 2px 2px 2px;
color: #555555;
display: inline-block;
height: 37px;
font-size: 14px;
line-height: 15px;
margin-bottom: 0px;
padding: 2px 6px;
vertical-align: middle;
}
Bootply

Answer 2

You can also use:
input.target {
border: 0;
}
or
input[type="number"].target {
border: 0;
}