This question already has answers here:
Background image not showing on iPad and iPhone
(15 answers)
Closed 8 years ago.
I have an issue using the background property in the sass
When I write:
background: url(../images/assets/calendar.png);
background-repeat: no-repeat;
background-size: 250px 230px;
background-position: 51px 91px;
background-color: $mainColor;
The sass compile it for:
background: url(../images/assets/calendar.png) 51px 91px/250px 230px no-repeat #f68e34;
But, the iPhone and iPad browsers don't understand this syntax, how can I resolve it?
Thanks in advance
Have you tried using background-image instead of the background shorthand?
If you write out each rule iOS/Safari will understand it.
background-image: url(../images/assets/calendar.png);
background-repeat: no-repeat;
background-size: 250px 230px;
background-position: 51px 91px;
background-color: $mainColor;
Related
I have a display problem with the box shadow property specifically on the iPhone 6 plus.
If I add the meta tag width=device-width, the following box shadow isn't displayed at all:
-webkit-box-shadow: 1px 1px 5px 5px #a8a8a8;
box-shadow: 1px 1px 5px 5px #a8a8a8;
If I don't use the meta tag, box shadows "magically" disappear if you zoom into the page. You can comprehend this here:
http://jsfiddle.net/b6aaq57z/3/
This seems to be a specific iPhone 6 plus bug. On older iPhone Versions running the same iOS Version (8.0.2), the box shadows are working properly.
Is there anyone with a solution?
You can add border-radius:1px to the div. It fixes the box-shadow issue in iphone 6+ and other retina devices
.box-shadow{
-webkit-box-shadow: 1px 1px 0.25em 0.25em #a8a8a8;
box-shadow: 1px 1px 0.25em 0.25em #a8a8a8;
border-radius:1px;}
Try using -webkit-apperance: none;
You can add this to your global reset to eliminate all issues with this. I use:
*, *:before, *:after {
-webkit-appearance: none;
}
I also have my box-sizing reset in there as well.
How could i add curved corner to a gwt-checkbox using css?
.gwt-CheckBox {
border-radius: 5px 5px 5px 5px;
}
This Doesn't works!!!!
i also tried this too. but no change.
.gwt-CheckBox > input {
border-radius: 5px 5px 5px 5px;
}
spell check - border-redius must be border-radius
Curved Corner for checkbox via CSS is possible only in firefox/chrome and not in IE8 browser.
Which browser are you testing on? Apart from IE for others try -moz-border-radius or -webkit-border-radius etc depending on your browser.
Refer the link for IE information- Support for "border-radius" in IE
I want to do this
This is select drop down of form
My code is
HMTL
<select>
<option>Country</option>
<option>India</option>
<option>USA</option>
</select>
Css
select{
width:197px;
height:45px;
border:solid 1px #13669b;
box-shadow:0 5px 2px 0px rgba(0,0,0,0.06) inset;
background:rgba(256,256,256,0.7);
color:#13669b;
font-size:16px;
font-family: 'LatoBold';
padding:0 14px;
line-height:45px;
}
I want to this only pure css. How?
There is no way to create a dropdown box like that with pure css (yet).
You can create your own js/css dropdown plugin or use one of the many jQuery/css plugins already available.
I am not sure if there is EASY cross browser way to do it but if you with combination of CSS + jQuery, you can get it working in all browsers in use:
Reinventing a Drop Down with CSS and jQuery
See the tutorial on how to do it and modify the CSS for the look you want.
Screenshot:
This solution works with pure CSS but it's Chrome-related. See the following example:
select {
-webkit-appearance: button;
-webkit-border-radius: 2px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-padding-end: 20px;
-webkit-padding-start: 2px;
-webkit-user-select: none;
background-image: url(../images/select-arrow.png),
-webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #AAA;
color: #555;
font-size: inherit;
margin: 0;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
}
Haven't tried to replace the -webkit prefix by a -moz one for it to be compatible with Firefox browsers, it might actually work as well, you should give it a go.
Dropdowns are implemented differently in different browsers, and styling is not widely supported. This has it's reasons. For one: consider the dropdowns on iPads/iPhones. They work radically different than desktop application dropdowns.
If you want a styled dropdown, you will have to build it yourself with lists and javascript. Or use one of numerous libraries available for this (which is further proof that no pure CSS solution is available).
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
HTML/CSS: How does Google create this drop shadow over their maps?
Using GWT and the Google Maps component, how do I best create the "panel shadow" effect as seen in the screenshot?
Try the box-shadow CSS property (make sure the browsers you are targeting supports it)
-webkit-box-shadow: inset 3px 3px 5px 5px #000000;
-moz-box-shadow: inset 3px 3px 5px 5px #000000;
box-shadow: inset 3px 3px 5px 5px #000000;
Use rgba color spec with opacity to get a "lighter" shadow.
This question already has answers here:
Make form button/text field same height in all browsers?
(7 answers)
Closed 8 years ago.
IE 6
FireFox, Chrome, IE 8
i cant get the button to align the same for all the browsers.. is there a hack for doing this alignment?
input, button {
float: left;
height: 20px;
}
vertical-align: bottom;
vertical-align: top;
Usually one of these works.....(firefox)