Firefox Can't Recognize Background Image of Checkbox - html

I've placed an image as the background for a checkbox. Everything works fine in chrome but when I use Firefox 32.0.3 firefox does not recognize the background image. Is there something I'm missing that's causing firefox to not add in the background image?
CSS
input[type=checkbox]:before {
content: "";
display: inline-block;
width: 12px;
height: 12px;
background-image: url('http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg');
background-size: 12px;
top: 2px;
position: absolute;
opacity:0.4;
}
HTML
<input type="checkbox" id="chk1" />
Fiddle here.

I solved this by going through a different approach. I created a span tag and with AngularJS (already in my app) I used a ng-class to display the background image to the span tag based on if the checkbox was marked or not.

Related

Why does a large border-radius value cause chrome to hide the image?

I have a 128px image with a border-radius to make it appear rounded (I'm actually using the .is-rounded class from Bulma to do this). This is the resulting CSS on the image:
.image img.is-rounded {
border-radius: 9999px;
}
This works in Firefox but in Chrome, the image is hidden.
If I change it to the following, it works:
.image img.is-rounded {
border-radius: 63px;
}
But anything beyond 63px, the image is hidden again:
.image img.is-rounded {
border-radius: 64px;
}
You can see this on my personal website here: https://dominick.cc/
Chrome 110.0:
Firefox:
I updated Chrome to 110.0.5481.100 and it seemed to resolve it. Weird!

Increasing the height of the content in firefox

I have a checkbox in my angular app. when the value is checked, the box is filled with the value in google-chrome. in firefox it is displaying only on top corner instead of filling the input field. How can i resolve this. please guide me.
HTML
<input class="customInput" id="custom" type="checkbox" formControlName="test" readonly>
css
.customInput {
width: 100%;
min-height: 70px;
border: none !important;
text-align: center;
font-size: 50px;
background: transparent;
}
// fully checked in chrome
// uncompatable firefox
Browsers react very differently,
In Chrome broswer it shows perfectly,
But in Firefox 57 shows,
More info : Visit styling checkbox in different browser

IE doesn't show SVG

the IE doesn't show SVG images on my website.
The first image that isn't shown is a logo image which is put via :before content in front of a Logofont.
the css code is the following:
.logo-svg:before {
content: url('images/logo.svg');
}
.logo-svg {
height: 1.6em;
width: 1.6em;
display: inline-block;
margin-right: 0.2em;
position: relative;
top: 0.2em;
}
Then a few images, that are background images for icons are not shown too, the CSS is here:
.author-link-posts {
background-image: url("/images/icons/svg/archive.svg") !important
}
Has somebody an idea why the IE doesn't show the SVG or maybe a workaround or something like this?
Regards,
Markus
SVG is not supported in IE8 and below. Is this issue happened in all other browsers? Also you can use modernizr as a fallback.
Basically Modernizr will add a "no-svg" class in tag.
The solution are the paths. I had to put the slash before the path, so it works in the IE.

radio button size - Firefox for Android

I was testing the three-state radio button i've created.
The code is too long to post over here... Link to code: codepen
input {
cursor: pointer;
width: 4rem;
height: 4rem;
position: absolute;
margin: 0;
padding: 0;
opacity: 0;
z-index: 1;
}
As you can see, i've created three radio buttons: each of them is a square of a given size, and absolute positioned. In this way the user can click/tap any part of the control, and the toggle should move accordingly. This works well on desktop devices.
On mobile, it works well on IE shipped with windows phone 8 devices, works good on Chrome for Android, but it's not working on Firefox for Android. If you change the input's opacity to 1, you'll see Firefox is going to apply the browser-default size to these controls, making impossible to these controls to cover the part they are assigned...
I'm testing it with CyanogenMod 11.0 (based on Android 4.4.4) on the Oneplus One.
Is it a bug? Is there a way to fix it?
You should style the <label> instead of the input.
The label will select the radiobox you need. And your radiobox will be hidden.
html
<input type="radio" id="yes" />
<label for="yes">Yes</label>
css
input {
visibility: hidden;
}
label {
display: inline-block;
height: 30px;
width: 50px;
}

Can the shape of the clickable area of an HTML anchor tag be changed?

I've been working on a site with a large circular logo in the header. The logo is an anchor tag set up as follows:
<a id="siteLogo" href="#" shape="circle" coords="157,155,147"><i>Site Logo</i></a>
Relevant CSS follows:
i {
visibility: hidden; }
#siteLogo {
background-image: url(../imgs/sprites_main2.png);
background-position: 1000px 1000px;
background-repeat: no-repeat;
border: none;
border-radius: 100%;
display: block;
height: 294px;
left: 10px;
position: relative;
top: 8px;
width: 294px; }
#siteLogo:hover {
background-position: -15px -324px; }
Setting the shape and coords attributes on the anchor tag will give me a link with a circular clickable (opposed to the normal square) area in Opera and Firefox. Chrome, Safari, and IE do not support theses attributes on anchor tags. I did some checking and it seems that HTML5 also does not support these attributes (correct me if I am wrong).
The question I pose to the community is simple. Is there anyway I can achieve a similar result as above that is HTML5 compliant and supported by the major browsers (I can live without IE support) without using an image map or adding any image tags to my HTML?
Javascript or jQuery solutions are acceptable.
I would suggest using padding property to increase the size of clickable area..
This may be a little late, but you can use a <div>, etc, with rounded corners. E.g.
<div style="border-radius:50px; border:1px solid black;
width:100px; height:100px;"
onclick="merry_go()">Stuff goes here</div>
gets you a 100px circle.