• 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

    • My best decision: SHIFT+DELETE WINDOWS Then Installed Fedora Linux. Now I am a Happy Person
    • I value a game as a whole including graphics. But going backwards in terms of graphics with a game I'm not already invested in (as in something I played and loved in the past and still do) is off-putting. Its a very poor demo trailer if they didn't crank the settings to max that would be ridiculous. Different strokes for different folks i guess, i'm not into slop the trailer and likely game could have been far better, it doesn't it instead looks like it was made on a shoe string budget or with lack of experience. But that could also be down to trying to get it running on low budget/outdated hardware and sacrificing the top end.
    • > Our goal is to ensure that the App Store remains an outstanding opportunity for developers and a safe, trusted experience for our users. There are so many scam apps on the platform that it is hard to believe they are truly interested in having a safe, trusted experience for their users.
    • Google announces upgraded Gemini 2.5 Pro model with enhanced capabilities by Pradeep Viswanathan Google today announced an updated Gemini 2.5 model with several improvements that can be observed in popular AI benchmarks. Google particularly highlighted that the new Gemini 2.5 Preview 06-05 "Thinking" model performs better in coding, math, science, and reasoning. Last month, during Google I/O, Google released an updated version of the Gemini 2.5 Pro model with significant improvements. Today's update builds on the release of the previous month with further enhancements. In addition to benchmark improvements, based on user feedback, this updated Gemini 2.5 Pro model also comes with improved style and structure, which will result in creative and better-formatted responses for end users. You can find the benchmark comparison with other leading AI models below. As you can notice in the above table, this updated Gemini 2.5 Pro preview model is now SOTA (State-of-the-Art) in coding benchmarks like Aider Polyglot. It also scored SOTA performance on GPQA and Humanity’s Last Exam (HLE) benchmarks, which test math, science, knowledge, and reasoning capabilities. In real-world testing, this latest 2.5 Pro model scored 24 points better on LMArena, maintaining its lead, and a 35-point jump on WebDevArena at 1443. Developers can access this latest Gemini 2.5 Pro preview model through the Gemini API via Google AI Studio and Vertex AI. General consumers will be able to access this model via the Gemini app. Google also confirmed that the Gemini 2.5 Pro model will be generally available in a couple of weeks, allowing developers to start using it in production-ready enterprise-scale applications.
    • The Bromance is definitely over! 🤣🤣🤣
  • Recent Achievements

    • One Year In
      survivor303 earned a badge
      One Year In
    • Week One Done
      jbatch earned a badge
      Week One Done
    • First Post
      Yianis earned a badge
      First Post
    • Rookie
      GTRoberts went up a rank
      Rookie
    • First Post
      James courage Tabla earned a badge
      First Post
  • Popular Contributors

    1. 1
      +primortal
      419
    2. 2
      +FloatingFatMan
      182
    3. 3
      snowy owl
      181
    4. 4
      ATLien_0
      176
    5. 5
      Xenon
      135
  • Tell a friend

    Love Neowin? Tell a friend!