CODEWITHSUNDEEP
operacss
joyqi
joyqi

Reputation: 123

opera inset box-shadow

Opera has had support for box-shadow since v10.5, but it doesn't work on an input element.

input[type=text] {
    background-color: #fff;
    border: 1px solid #a0a0a0;
    box-shadow: inset 1px 1px 1px #d2d2d2;
    -o-box-shadow: inset 1px 1px 1px #d2d2d2;
}

<input type="text" name="test" />

This code works fine on Chrome and Firefox, I'm using Opera 11.01 on OSX 10.6. Can anybody help fix this?

Upvotes: 3

Views: 4165

Answers (4)

Paul Kozlovitch
Paul Kozlovitch

Reputation: 804

Also, if you need background-color additional to Lea's solution, you can add one more inset shadow, like so 

box-shadow: inset 0 1px 4px -1px rgba(0, 0, 0, .7), /*actual shadow*/
inset 0 0 100px 0 #fff; /*just white background*/

Upvotes: 1

Krzysztof Wołowski
Krzysztof Wołowski

Reputation: 455

Opera is ignoring many css properties on input elements. Box-shadow is not the only one. Text-shadow or text-transform are also ignored.

Using a button element istead of an input can be a solution when you deal with buttons.

Upvotes: 1

clairesuzy
clairesuzy

Reputation: 27624

It does appear to be a bug, I however had a form where it was working and couldn't figure out why - stripping it down it appears that adding border-radius makes it appear (if you still need the background color and can't use Lea's solution) - if you don't want obvious rounded corners you can use a 1px radius

input[type=text] {
    background-color: #fff;
    border: 1px solid #a0a0a0;
    box-shadow: inset 1px 1px 1px #d2d2d2;
    border-radius: 1px;
}

Upvotes: 4

Lea Verou
Lea Verou

Reputation: 23887

It looks like a bug in Opera (I just reported it). You can use background: transparent; and it will work (assuming that the background of the container is also white).

Also, there's no -o-box-shadow, Opera supported the nonprefixed box-shadow property since it implemented it.

Upvotes: 8

Related Questions