• 0

[CSS] Styling Checkboxes to Display in Firefox


Question

Hi :)

I am currently creating my forums and website for an assignment at university and I have already styled the textboxes and buttons on my forms however, today I did my registration form and I ran into a problem styling the checkbox.

The CSS code I added works in Opera. The checkbox is styled exactly as I want it in Opera (although it has a weird border colour) but it doesn't work in Firefox, Internet Explorer, Safari and Chrome :/

I only care about Firefox at the moment as my deadline is fast approaching and I am months behind but I care a lot about design and while this may not be the final design of my website, it will be similar and I love the way I have done textboxes and buttons, therefore I really just can't leave this one.

Does anybody know of a way to style the checkbox show the customisation shows up in Firefox (for example how it currently shows in Opera for my website)?

Also, while I'm here, does anybody know how to better position form elements (textboxes, buttons, etc) instead of using the "margin-left" attribute (and other "margin" attributes)? That seems to be the only thing that works (and it doesn't work all that well) :s

Any help would be much appreciated thank you :)

Here is my website with the problem: http://homepages.shu.ac.uk/~cjricha2/register471.php

Here is the CSS code I am currently using for the checkbox:

input#rules-agreement-checkbox {
	background-color: #777776;
	background-image: url("background_checkbox.png");
	border: 1px;
	border-style: groove;
	border-color: #414141;
	height: 15px;
	width: 15px;
	font-size: 7px;
	color: #F9A007;
	margin-left: 100px;
}

Edited by cJr.

6 answers to this question

Recommended Posts

  • 0

If it's still actual, you can use checked pseudo-element in CSS3. Using this element, you can do checkbox from label tag, and label tag can be applied with any CSS styles as a regular div or span. Here is example on how it works - styling checkbox as toggle button using only CSS3. Anyway using it, you want have any problems with different appearance in all browsers.

  • 0

I always write just 2 labels first one is the checkbox and second one is actual label.

Then I hide the input element with css. Style the first label as a checkbox and use input:checked + label to style the checked state of the first label.

  • 0
  On 23/08/2014 at 22:53, Seahorsepip said:

I always write just 2 labels first one is the checkbox and second one is actual label.

Then I hide the input element with css. Style the first label as a checkbox and use input:checked + label to style the checked state of the first label.

Also, for attribute in label must have equl value as id attribute in input to trigger click for real hidden checkbox.

  • 0
  On 25/08/2014 at 18:57, Eraclio said:

Also, for attribute in label must have equl value as id attribute in input to trigger click for real hidden checkbox.

Ofcourse otherwise we lose the whole point of using a label element ^^

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • That's wonderful. A shame that a few fringe nutjobs will somehow concoct a story to make this something nefarious. I do wish he'd committed to using more of the foundation's funds for scientific/medical research here at home, though. It looks like the U.S. is suddenly poised to become a backwoods nation in research.
    • Scientists explain how water could have actually made Mars the red planet it is today by Sayan Sen For centuries, scientists have wondered why Mars is red. The long-standing theory was that the planet’s rusty color came from hematite, an iron-rich mineral formed in dry conditions. But new research suggests something else might be responsible: ferrihydrite, an iron oxide-hydroxide mineral that forms in wet environments. A study published in Nature Communications by researchers from Brown University and the University of Bern suggests that ferrihydrite (Fe5O8H · nH2O) is the dominant iron-containing mineral in Martian dust. Their findings—based on orbital observations, rover data, and lab experiments—challenge previous ideas about Mars' surface composition. “The fundamental question of why Mars is red has been thought of for hundreds if not thousands of years,” said Adomas Valantinas, a postdoctoral fellow at Brown University. “From our analysis, we believe ferrihydrite is everywhere in the dust and also probably in the rock formations, as well.” Ferrihydrite is formed when iron reacts with oxygen and water. On Earth, it’s commonly found in volcanic rock and ash. Its presence on Mars suggests that the planet was once much wetter, with conditions that could have supported liquid water. This contrasts with hematite, which forms in drier environments. To test their theory, the researchers recreated Martian conditions in a lab. They ground minerals into tiny particles—about 1/100th the width of a human hair—matching the size of real Martian dust. They then studied how light reflected off these particles. The results showed that ferrihydrite remains stable in Mars’ current dry, cold climate, but its structure still holds signs that it formed when the planet had water. “What we know from this study is the evidence points to ferrihydrite forming, and for that to happen there must have been conditions where oxygen and water could react with iron,” Valantinas explained. “Those conditions were very different from today’s dry, cold environment.” To confirm ferrihydrite’s presence, the team studied data from NASA’s Mars Reconnaissance Orbiter and ESA’s Mars Express and Trace Gas Orbiter. They also used spectral readings from rovers like Curiosity, Pathfinder, and Opportunity. Combining all of these sources, they found that the mineral appears widespread on the Martian surface. This discovery challenges previous theories that Mars gradually oxidized in dry conditions. Instead, it suggests that ancient Mars went through a wetter phase before drying out. That shift from a water-rich past to the dry, dusty planet we see today is key to understanding Mars’ climate history—and possibly its ability to support life. “The study is a door-opening opportunity,” said Jack Mustard, senior author of the study. “It gives us a better chance to apply principles of mineral formation and conditions to tap back in time.” While the findings provide strong evidence for ferrihydrite’s role in Mars’ red dust, definitive proof will have to wait until Mars samples—currently being collected by NASA’s Perseverance rover—are brought back to Earth. Scientists hope these samples will confirm the theory and shed more light on the planet’s environmental history. Source: Brown University, University of Bren, Nature | Image via Depositphotos This article was generated with some help from AI and reviewed by an editor. Under Section 107 of the Copyright Act 1976, this material is used for the purpose of news reporting. Fair use is a use permitted by copyright statute that might otherwise be infringing.
    • I would say 98% of people you can't figure out how to install Linux would never attempt to install Windows. It's not news non-tech savvy people can't install an PC OS.
    • Do I really have to tell you that people generally don't make random posts about how Windows is running perfectly for them? Of course you're seeing more posts about people hating Windows, it's just a very loud minority as usual.
    • ...and not really appropriate for most people for desktop usage.
  • Recent Achievements

    • Week One Done
      jrromero17 earned a badge
      Week One Done
    • One Month Later
      jrromero17 earned a badge
      One Month Later
    • Conversation Starter
      johnwin1 earned a badge
      Conversation Starter
    • One Month Later
      Marwin earned a badge
      One Month Later
    • One Year In
      fred8615 earned a badge
      One Year In
  • Popular Contributors

    1. 1
      +primortal
      237
    2. 2
      snowy owl
      156
    3. 3
      ATLien_0
      142
    4. 4
      +FloatingFatMan
      132
    5. 5
      Xenon
      131
  • Tell a friend

    Love Neowin? Tell a friend!