CODEWITHSUNDEEP
htmlcss
Abdul Jabbar
Abdul Jabbar

Reputation: 2573

Remove the default shadow on right and bottom of input type text

I have few input fields on which i have given some border rounding. The problem I am facing is that a shadow appears on the right and bottom of the field. I want to control the width of it along with color and some other properties. I have used box shadow properties but that creates another shadow instead of removing or styling this one. So what is this little thing if it's not a box shadow and how to style it..

.options {
    width:40px;
    text-align:center; 
    margin-left:30px;
    border-radius: 5px;
    border-style:outset;
    box-shadow: none;	
}
<input type="text" class="options" id="3" name="1" value="3" readonly>

Fiddle

Upvotes: 0

Views: 182

Answers (2)

Ufuk Hacıoğulları
Ufuk Hacıoğulları

Reputation: 38518

This is the default behavior for border-style:outset. You should overwrite it with something like solid.

.options {
    width:40px;
    text-align:center; 
    margin-left:30px;
    border-radius: 5px;
    border: solid 1px grey;
}
<input type="text" class="options" id="3" name="1" value="3" readonly />

Upvotes: 1

Vicky
Vicky

Reputation: 378

Add border:none; or add border:1px solid grey; on your class

.options {
    width:40px;
    text-align:center; 
    margin-left:30px;
    border-radius: 5px;
    border-style:outset;
    box-shadow: none;   
    border:none;
}

or

.options {
        width:40px;
        text-align:center; 
        margin-left:30px;
        border-radius: 5px;
        border-style:outset;
        box-shadow: none;   
        border:1px solid grey;
    }

Upvotes: 0

Related Questions