I'm having trouble fixing one issue with checkbox on IOS browsers. I always get a black check icon with a black square around it (picture). This only happens on IOS browsers.
I'm using
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
Any ideas?
Anyone had the same problem?
I tried several ways to fix it, but in the end I tried one simple thing and it worked... I change the SVG that I was using. Just added white background on the SVG image and it worked!
Thanks for the help anyways :)
Shot in the dark, since I can't access and play with your code, but try doing:
input[type='checkbox']:checked {
-webkit-appearance: none;
}
Might work, idk. If not, some source code would be nice.
input[type='checkbox'] {
background-color: transparent;
}
Setting background-color to transparent solved this for me.
Related
Can any one help me how to remove blue color from image on selection
you can see screenshot from here...
You can use the user-select property (though pressing CTRL + A will still cause the blue selection background to appear as #WebDesignerRDj pointed out):
img {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
http://jsfiddle.net/rU2y4/2/
Use
::selection {
color: #e2e2e2;
background-color: #999;
}
Note: This only changes the font properites. Not the images.
However if you want to remove some background from image its Impossible with CSS. CSS is meant to edit the HTML style not the images. For that use Adobe Photoshop!
I am seriously not able to understand, why do you want to change the background of the image.
Ok there can be a solution. You create an image with transparent background! And change its background. A little more elaboration please.
Edit: You can use this for image background. But the div background will be changed. Use
background-color: none;
or
background-color: transparent;
This will not select the image. Not change the background to blue!
I am just wondering why the Zurb Foundation's select input works fine on their website:
foundation forms
And when I copy the excact code from their example and put on my website - there occurs a 'second arrow issue' on firefox:
The question is what would be the best fix for that issue.I use:
select {
background-image: none;
}
I am not sure if it is the best way to work around that, of course remembering to apply that code only for firefox.
Any ideas how to fix the problem without any 'hacks'?
It's seems to be a Firefox bug for version 30.0 and up on certain device. Unfortunately I have no work around... other than removing the arrow on the select box.
For me worked:
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
It is a fix for other browsers too.
Im using Firefox 26.0 and the select arrow doesn't show at all, just the standard dropdown arrow box.
Here is my solution to the issue:
#-moz-document url-prefix() {
select {
background-image: url(data:image/svg+xml;
base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+);
background-position: 100% center;
background-repeat: no-repeat;
padding: 0.5rem;
text-indent: 0.01px;
text-overflow: '';
}
}
Working example: JSFIDDLE
until safari 5.1 and maybe 6.0 it was possible to hide the slider-thumb via css
input[type=range].onoff::-webkit-slider-thumb,
input[type=range].onoff::-moz-slider-thumb,
input[type=range].onoff::slider-thumb {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
height:20px; width:20px;
background-color:transparent;
}
worked also in chrome, ff and opera.
now with safari 6.1 and 6.1.1, firefox 25
this css is not hiding the slider-thumb anymore.
what did i miss?
is there a better, more valid code i could use to hide just the thumb?
no jquery solutions please, i work on a native javascript plugin to add touchable audio-wheels, working in different environments. maybe later i will translate this to jQ too.
okay testet..
looks like, the comma separated list of selectors and setting them all ot once is not working anymore. so valid code can be..
input[type=range].onoff::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range].onoff::-moz-slider-thumb {
-moz-appearance: none;
}
input[type=range].onoff::slider-thumb {
appearance: none;
}
but still in FF i can't hide the thumb, how?
Can any one help me how to remove blue color from image on selection
you can see screenshot from here...
You can use the user-select property (though pressing CTRL + A will still cause the blue selection background to appear as #WebDesignerRDj pointed out):
img {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
http://jsfiddle.net/rU2y4/2/
Use
::selection {
color: #e2e2e2;
background-color: #999;
}
Note: This only changes the font properites. Not the images.
However if you want to remove some background from image its Impossible with CSS. CSS is meant to edit the HTML style not the images. For that use Adobe Photoshop!
I am seriously not able to understand, why do you want to change the background of the image.
Ok there can be a solution. You create an image with transparent background! And change its background. A little more elaboration please.
Edit: You can use this for image background. But the div background will be changed. Use
background-color: none;
or
background-color: transparent;
This will not select the image. Not change the background to blue!
I have following CSS :
.rwWindowContent, .rwExternalContent
{
border-style: groove !important;
border-width: 1px;
border-radius: 10px;
background-image: url(background.jpg) !important;
border-color: GhostWhite;
}
the backgound Image added in above css display well in Mozila,chrome, Safari, and IE9..
but it doesn't display in IE8 only..
as you can see in following Image all the styles related to Background has been removed by IE8 tool:
Is there any suggestions ??
make sure you saved you jpg in RGB mode instead of CMYK. hope this helps.
IE 8 needs to know width and height of the container if its empty.
I think better convert your image from .jpg to .png format. This may solve your problem.