• 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

    • RIP Hotlips..... IMHO, her best scenes were the few where she dared to let her REAL feminine side show through from underneath all that crappy, worn-torn soldier facade that she had to keep up with...she instantly lit up every room or situation where she was featured !
    • Helium Converter 3.3.69.0 by Razvan Serea Helium Converter is a free Windows utility for converting audio files between formats such as MP3, FLAC, AAC, WMA, OGG, and WAV. It supports batch conversion, preserves or updates tag information, and offers features like volume normalization. With a simple interface, it's ideal for users who need to convert large music libraries quickly and efficiently while retaining metadata. Helium Converter key features: Supports file formats: MP3, MP4, FLAC, AAC, M4A, WMA, WAV, OGG, OPUS, APE.... Batch conversion for large music libraries Preserves and edits metadata (ID3, Vorbis Comments, etc.) Volume normalization to equalize loudness Album art extraction and embedding Drag-and-drop interface for quick file selection Adjustable encoding parameters (bitrate, sample rate, channels) Uses internal codecs for consistent performance Supports CUE sheets for split track conversion File renaming based on tags during export Unicode support for international file and tag names Logging of conversion processes for troubleshooting Multi-core CPU support for faster conversions Download: Helium Converter 3.3.69.0 | 25.1 MB (Freeware) Links: Helium Converter Home Page | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Since it's been quite a while since the last episode aired, would it be fair (or cruel) to refer to Peggy as a MILF, or even a SMILF ?  HAHAHAHAHAHA
    • Their computers are not gonna stop working in October
    • Crowdstrike the same service provider that caused millions of in damages? I hate disliking a company for a singular failure but they really screwed up.
  • Recent Achievements

    • One Year In
      WaynesWorld earned a badge
      One Year In
    • First Post
      chriskinney317 earned a badge
      First Post
    • Week One Done
      Nullun earned a badge
      Week One Done
    • First Post
      sultangris earned a badge
      First Post
    • Reacting Well
      sultangris earned a badge
      Reacting Well
  • Popular Contributors

    1. 1
      +primortal
      172
    2. 2
      snowy owl
      122
    3. 3
      ATLien_0
      122
    4. 4
      Xenon
      116
    5. 5
      +Edouard
      93
  • Tell a friend

    Love Neowin? Tell a friend!