Question

<span class="span3">
    <input type="text" class="dottedLineInput" placeholder="New milestone name"></niput>
</span>​


textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
background-color: white;
border: 1px solid #CCC;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}

.dottedLineInput {
border: 0 !important;
margin-top:20px;
-webkit-box-shadow: 0;
-moz-box-shadow: 0;
box-shadow: 0;
border-bottom: 1px dotted #BBB !important;
}
.dottedLineInput:focus {
 outline: none;   
}

This is the code. The general selector styles apply to my input and I can’t get rid of the box-shadow inside the dottedLineInput class. What am I missing?

Answer 1

Try none, that is the box-shadow‘s default value:

-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;

If it still doesn’t work for some reason, try adding !important:

-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;