CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
theamateurdataanalyst
theamateurdataanalyst

Reputation: 2834

Adding a border to input with Bootstrap

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.

Upvotes: 0

Views: 2209

Answers (2)

tnga
tnga

Reputation: 182

You can also use: 

 input.target {
    border: 0;
 }

or 

 input[type="number"].target {
    border: 0;
 }

Upvotes: 0

APAD1
APAD1

Reputation: 13666

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

Upvotes: 4

Related Questions