I have this button that appears fine on desktop and mobile, but when viewed on an android tablet there is this white background around the corners where the transparency for the button would be. Has anyone encountered this?
button.css3button {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #ffffff;
padding: 10px 20px;
background: none;
background: -moz-linear-gradient(top,#41f0ed 0%,#278a88);
background: -webkit-gradient(linear, left top, left bottom, from(#41f0ed), to(#278a88));
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
border: 0px solid #000000;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 1px 1px rgba(255,255,255,1);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 1px 1px rgba(255,255,255,1);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 1px 1px rgba(255,255,255,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,0.3);
}
have you tried
background:none;
to
background: transparent;
Try removing box-shadow or gradient. I imagine one of them is the culprit. If it is, you can do a conditional check for and Android tablet, and exclude that from your CSS.
var userAgent = window.navigator.userAgent.toLowerCase();
if ( /android/.test( userAgent ) && !/mobile/.test( userAgent ) ) {
//it's an android tablet, remove box-shadow
};
Related
I'm trying to set a fill color of #333 for the arrow on webshim's HTML5 form validation bubble, but I can't seem to identify the correct class.
My CSS so far:
.ws-po-box {
padding: 10px;
/* border: 1px solid red; */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #333;
-webkit-box-shadow: 0 2px 6px -4px rgba(0,0,0,0.3);
-moz-box-shadow: 0 2px 6px -4px rgba(0,0,0,0.3);
box-shadow: 0 2px 6px -4px rgba(0,0,0,0.3);
font-family: 'Roboto', sans-serif;
font-size: 14px;
color: #fff;
letter-spacing: 0.1pt;
}
.ws-po-arrow {
/* border-bottom: .61538em solid red; */
}
Fiddle: http://jsfiddle.net/zhwdbhdd/.
Any help would be appreciated!
Looks like arrow CSS is contained in ws-po-arrowbox class.
<div class="ws-po-arrow">
<div class="ws-po-arrowbox"></div>
</div>
Arrows color is not a background-color, but a border color, since the arrow is made with borders. So add this CSS
.ws-po-arrowbox{
border-bottom-color:red!important;
}
I updated your fiddle to demonstrate:
http://jsfiddle.net/zhwdbhdd/1/
how do i add a background image to a gradient background in css. here my code
input.button-add {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #ffffff;
padding: 4px 4px;
background: -moz-linear-gradient(
top,
#ff2819 0%,
#ff0d0d);
background: -webkit-gradient(
linear, left top, left bottom,
from(#ff2819),
to(#ff0d0d));
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #ffffff;
-moz-box-shadow:
0px 1px 1px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
-webkit-box-shadow:
0px 1px 1px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
box-shadow:
0px 1px 1px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
is it possible and if its possible how?
Why not? Just add as many background-images as you want (gradients are also images) by separating them with commas. Also, specify background-position and background-repeat for all of them.
Here is your code with one image background and one gradient background:
input.button-add {
color: #ffffff;
padding: 4px 4px;
border: 1px solid #ffffff; border-radius: 5px;
display: inline-block;
width: 120px; height: 64px;
box-shadow: 0px 1px 1px rgba(000, 000, 000, 0.5), inset 0px 0px 2px rgba(255, 255, 255, 0.7);
background-image:
url('http://lorempixel.com/16/16'),
-webkit-gradient(linear, left top, left bottom, from(#ff2819), to(#fff));
background-position: 4px center, center center;
background-repeat: no-repeat, no-repeat;
}
<input id="btn" type="button" value="Click Here" class="button-add" />
Hi I am trying to add a border to button in cshtml
.linkbig:hover {
border: solid #000000 1px;
-webkit-box-shadow: 6px 6px 5px #000000 ;
width: inherit;
}
but all I am getting is a border when I want a shadow this is only failing in IE
any help?
-webkit- is only supported by Safari, Chrome, Opera 15+.
Therefore, your code will not work in IE or Firefox.
You could however try using:
-moz-box-shadow: 6px 6px 5px #000000; /* Firefox */
-ms-box-shadow: 6px 6px 5px #000000; /* Internet Explorer */
box-shadow: 6px 6px 5px #000000; /* CSS3 */
However, this is only supported by IE 9 or later.
box shadow in IE need no prefixing
box-shadow: 1em 0.1em 0.5em 0.05em #000000;
or older IE you need -ms
ms-box-shadow: 1em 0.1em 0.5em 0.05em #000000;
firefox will need -Moz
-moz-box-shadow: 1em 0.1em 0.5em 0.05em #000000;
if you do not need the border line you need to remove this:
border: solid #000000 1px;
or you'll end up with a 1px black line around your .linkbig and this is likely to hide your shadow if its really subtle.
-Website is only supported by Safari, Chrome, Opera.
Update your CSS like below. So that it will work in chrome, firefox and IE.
.linkbig:hover {
border: solid #000000 1px;
-webkit-box-shadow: 6px 6px 5px #000000 ;
box-shadow: 6px 6px 5px #000000 ;
-moz-box-shadow: 6px 6px 5px #000000;
width: inherit;
}
Try like this:
CSS:
.linkbig:hover {
-webkit-box-shadow: 6px 6px 5px #000000;
-moz-box-shadow: 6px 6px 5px #000000;
-o-box-shadow: 6px 6px 5px #000000;
box-shadow: 6px 6px 5px #000000;
}
try this
filter:
progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=10, Color='#000000')
Here the class and the example
<asp:DropDownList ID="dropDownListZenithYesNo"
CssClass="dropDownBox" runat="server"></asp:DropDownList>
And here the CSS class of that dropdownlist
.dropDownBox
{
font-size: 13px;
color: #3b3b3b;
padding: 5px;
background: -moz-linear-gradient(
top,
#f0f0f0 0%,
#d6d6d6);
background: -webkit-gradient(
linear, left top, left bottom,
from(#f0f0f0),
to(#d6d6d6));
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #999999;
-moz-box-shadow: 0px 1px 2px rgba(000,000,000,0.5), inset 0px 1px 0px rgba(255,255,255,1);
-webkit-box-shadow: 0px 1px 2px rgba(000,000,000,0.5), inset 0px 1px 0px rgba(255,255,255,1);
box-shadow: 0px 1px 2px rgba(000,000,000,0.5), inset 0px 1px 0px rgba(255,255,255,1);
text-shadow: 0px 1px 0px rgba(255,255,255,1), 0px 1px 0px rgba(255,255,255,0);
}
And here how it looks nice when you not click to see elements
And this is how very bad it looks when you click to see elements
Testing with windows 7 firefox latest version
CSS CSS3 HTML dropdown list color style
Add the following css below your css
.dropDownBox option
{
font-size: 13px;
color: #3b3b3b;
padding: 5px;
background: -moz-linear-gradient(
top,
#f0f0f0 0%,
#d6d6d6);
background: -webkit-gradient(
linear, left top, left bottom,
from(#f0f0f0),
to(#d6d6d6));
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #999999;
-moz-box-shadow: 0px 1px 2px rgba(000,000,000,0.5), inset 0px 1px 0px rgba(255,255,255,1);
-webkit-box-shadow: 0px 1px 2px rgba(000,000,000,0.5), inset 0px 1px 0px rgba(255,255,255,1);
box-shadow: 0px 1px 2px rgba(000,000,000,0.5), inset 0px 1px 0px rgba(255,255,255,1);
text-shadow: 0px 1px 0px rgba(255,255,255,1), 0px 1px 0px rgba(255,255,255,0);
}
But test your page in multiple browsers because it may have different results. Infact i have different results.
You must be inheriting from a default style. I would suggest specifying the color for your options:
.dropDownBox option{
font-size:1.2em;
background-color:#FF0 !important;
display:block;
}
Here is the fiddle
I have the following css:
fieldset ul li input {
width: 96%;
margin: 0;
padding: 6px;
font-size: 13px;
border: 1px solid #CCC;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 2px 2px white, inset 0 1px 3px #EEE;
-webkit-box-shadow: 0 2px 2px white, inset 0 1px 3px #EEE;
box-shadow: 0 2px 2px white, inset 0 1px 3px #EEE;
}
Which is working under Firefox and Chrome. However in IE9, when I insert some text, I can't see it completely. As you can see is hidden in the half of it:
Either increase the height or the padding.
input {
padding: 10px;
}