Geek asks and answers

Box-shadow opera insert

Opera had box-shadow support with v10.5, but it does not work on the 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 in Chrome and Firefox, I use Opera 11.01 on OSX 10.6. Can anyone fix this?

+3
source share
4 answers

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

Also, not there -o-box-shadow, Opera supports the nonprefixed property box-shadow, as it is implemented.

+8
source

, , , , , - , , border-radius ( Lea) - , 1px

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

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

Using an input istead button element may be a solution when working with buttons.

+1
source

In addition, if you need an additional background color for Lea, you can add another insertion shadow, for example

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

More articles:


All Articles