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?
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.
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;
}
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.
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*/
Related
I have problems with react-native. Have buttons with shadows what I must make. In CSS example all is easy for shadows:
background: #D3E3F2;
box-shadow: -1px -1px 3px #F3F9FE, 1.5px 1.5px 2px #BDD1E4;
border-radius: 15px;
And, for blur effect:
background: #00A3FF;
box-shadow: inset 4px 4px 20px #78CEFF, inset -5px -5px 20px rgba(19, 0, 247, 0.3);
border-radius: 15px;
But how to do with React Native. In attach I add two images of the result that I except.
Have a look at this website, which generates the shadow styles for you automatically for both android and ios. Just copy the output to StyleSheet in react-native and it should be working fine
https://ethercreative.github.io/react-native-shadow-generator/
When using a rounded border on an image, webkit browsers hide the border behind the image
CSS
img {
border: 10px solid #000;
border-radius: 100%;
}
HTML
<img src="http://25.media.tumblr.com/tumblr_mbjei3b3re1r30y2do1_500.jpg" />
Bug reproduced # http://jsfiddle.net/zPpVm/
This is probably related to this Webkit bug, but I cannot find a suitable work around.
A possible workaround is to use a box-shadow:
box-shadow: 0 0 0 10px black;
Live Example
The main problem: It won't be calculated in the box-model
As another workaround, you can wrap your image like this:
<span class="img_container" >
<img src="http://25.media.tumblr.com/tumblr_mbjei3b3re1r30y2do1_500.jpg" />
</span>
Than style elements:
.img_container {
border: 10px solid #000;
border-radius: 100%;
display: inline-block;
overflow: hidden;
}
.img_container img {
display: block;
}
All modern browsers except Opera will render it correctly.
This looks like a recently introduced bug that manifests on both iOS6 and Safari 6. Has anyone else gotten bitten by this?
What might be a work around? What if we really actually needed that box shadow to have spread=0? Right now we can get the shadow to render by setting the spread value to -1px or 1px
FIDDLE: http://jsfiddle.net/uCseS/2/
It seems like a bug indeed. However, if you use rgba notation for the background-color, the shadow reappears.
img{
background-color: rgba(255,255,0,0);
box-shadow: #000 2px 2px 10px 0px;
-webkit-transform: translate3d(2px, 5px, 0px);
}
http://jsfiddle.net/willemvb/KuhQp/
I have a problem with displaying a block with top/bottom border and border-radius. Don't know why an inside radius appears within a border.. Please, take look at the screenshot & code below..
http://img703.imageshack.us/img703/3074/scrren1.jpg
<section id="block">
<div class="block-header"><h1>Block</h1></div>
</section>
#block {width:1000px; height:329px; position:relative; border-radius:4px 4px 4px 4px; -webkit-border-radius:4px 4px 4px 4px;}
#block .block-header { position:absolute; right:0px; top: 0; border-top:10px solid #81a32b; width:500px; border-radius:0px 4px 0px 0px; -webkit-border-radius:0px 4px 0px 0px; }
Do u know any solution to this problem?
jsfiddle
In Opera the height is directly related to the rounding you are trying to achieve
Css
border-top:10px solid #81a32b;
border-radius:0px 10px 0px 0px;
Fiddle -> http://jsfiddle.net/325nH/2/
you have declared:
border-top:10px solid #81a32b;
border-radius:0px 4px 0px 0px;
so you are 6px short that are filled by Opera with white space
What I am trying to do is to round corners of a <select> using "border-radius". Strangely, webkit browsers show white background overflowing borders of the <select>.
Update
Here's the screenshot and my code:
HTML:
<select class="rounded_select">
<option>rounded_select</option>
</select>
CSS:
.rounded_select {
border-top: 2px solid #ccc;
border-left: 2px solid #ccc;
border-bottom: 2px solid #eee;
border-right: 2px solid #eee;
border-radius: 10px;
}
Are there any ideas how to fix it?
Update: It is preferrable to save the button image on the right of the select.
-webkit-appearance:none might do the trick.
EDIT: Yep that appears to do it: http://jsfiddle.net/dbxjB/
Setting background-color for the select seems to do the trick.
Edit: Does not. Setting border to 1px did it. As well as 2px dashed for example. Glitchy.