CODEWITHSUNDEEP
htmlcss
Sowmya
Sowmya

Reputation: 26969

Remove the left inset shadow

I am using a tag next to the input box. There is inner box shadow given for both but the problem is , I need to make the entire thing to look like a one item (text box) so I need to remove the left side shadow of the text box.

Now you can see the line between the input and the a tag. How do I remove that line (tat is the shadow)

Here is the demo http://jsfiddle.net/jBeqk/

Upvotes: 1

Views: 1726

Answers (4)

alabamaliquidsnake
alabamaliquidsnake

Reputation: 1

Try negative spread-radius:

input[type="text"]{box-shadow: inset 0 3px 0px -1px #C3C1BB;}
.search_indexclose{box-shadow: inset -2px 5px 0px -3px #C3C1BB;}

Upvotes: 0

yunzen
yunzen

Reputation: 33439

Use this value for box-shadow

inset 0px 3px 1px -1px #c3c1bb

Add a negative spread (the forth value) and equalise for the x-value by adding back the spread amount

http://jsfiddle.net/HerrSerker/jBeqk/79/

Upvotes: 0

Aymeric
Aymeric

Reputation: 1175

If I understand you right, you want to remove the thin shadow between the input and the link which stand as button.

Therefore I've modified your fiddle to get this one http://jsfiddle.net/jBeqk/75/

I've modified the shadow properties in both the input and the link

Input:

webkit-box-shadow: inset 1px 2px 1px #c3c1bb; 
box-shadow: inset 1px 2px 1px

Link:

-webkit-box-shadow: inset -1px 2px 1px #c3c1bb;
box-shadow: inset -1px 2px 1px #c3c1bb;

You can noticed I've modified the first parameter setting it to '1px' for the input and to '-1px' for the link button to make the shadow respectively coming from the left and the right.

Regards.

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Hi sowmya now you can do this

and remove left border of input text box

input[type="text"]{
-webkit-box-shadow: inset 1px 2px 1px #c3c1bb; 
box-shadow: inset 1px 2px 1px #c3c1bb;
}

or second option is this

input[type="text"]{
-webkit-box-shadow: inset 0 2px 1px -1px #c3c1bb; 
box-shadow: inset 0 2px 1px -1px #c3c1bb;
}

Live demo

-------------------------------------

------------------------------------------

if you total remove the shadow of your input and button

than apply this css

input[type="text"]{
    -webkit-box-shadow: inset 1px 2px 1px #c3c1bb; box-shadow: inset 1px 2px 1px #c3c1bb;
}
    .search_indexclose{
        -webkit-box-shadow: 0 4px 1px -2px #C3C1BB inset;    
        box-shadow: 0 4px 1px -2px #C3C1BB inset;
    }

this demo is

Upvotes: 0

Related Questions