Question

I have a CSS style defined for all inputs with type text on the page. I’m using the Spectrum Color Chooser on part of my page, and this is implemented onto the page using

<input type="text" class="basic" />

I’m trying to override the “global” styling that I’ve applied to all inputs of type text using the following, but it’s not working:

input[type=text]:not([class=basic]), select {
    height:28px;
    border:1px solid #c5d1db;
    padding-left:5px;
    padding-right:5px;
    color:#627686;
    font-size:13px;
    box-shadow:inset 0 4px 5px 0 #ebebeb;
    margin:0;
}

Is there a way to override this?

Answer 1

I really fail to see the issue here, isn’t this the point of CSS specificity? http://jsfiddle.net/calder12/GBH8b/

input[type=text]{
height:28px;
border:1px solid #c5d1db;
padding-left:5px;
padding-right:5px;
color:#627686;
font-size:13px;
box-shadow:inset 0 4px 5px 0 #ebebeb;
margin:0;
}

input[type=text].basic{
height:18px;
border:1px solid #000;
padding-left:5px;
padding-right:5px;
color:#627686;
font-size:13px;
margin:0;
}