Professional flags without framework

checkbox personnalisation button css apparence

Using the CSS style sheet and JavaScript functions, forms change their appearance.

There are numerous tutorials showing how to improve the appearance of flags working with jQuery, Mootool, or other Ajax frameworks. But are these frameworks really needed in this particular case?

In fact, this can only be done using CSS and JavaScript, using the standard <button> form element, not <checkbox>. As well as an image to change the appearance of the flag.

Display

Form

Do you appoint him?

To insert a checkmark on the page, the code will look like this:

<button type="button" class="prettycb" value="0" onclick="setcbimg(this)"></button>

Please note that:

1) We are using the <button> object, not the <input> object, because the value of the latter is displayed, and this is not what you want here. For a button object, the content between the open and close tags is displayed.

2) We specify the type "button," this is necessary to control the value attribute by browsers (according to our tests).

CSS code

.prettycb
{
  background:url('uncheck.png');
  background-repeat:no-repeat;
  width:16px;
  height:16px;
  padding:0;
  box-shadow:1px 2x 3px #AAA; 
  -webkit-box-shadow:1px 2px 3px #AAA;	
  border:none;
}

The check box is initialized as uncheck.png. This is a disadvantage of simplified code as it is. It can be removed using JavaScript code, which initializes the fields to load the page by changing the image depending on the value of the 0 or 1 value attribute.

JavaScript function

function setcbimg(element)
{
  var v = 1 - element.value;
  var z = new Image(); 
  if(v)
    z.src = "check.png"
  else	
    z.src = "uncheck.png"
  element.style.backgroundImage="url(" + z.src + ")";	
  element.value=v;
}

This function is called when you click a check box to select or clear the check box .

The value contained in the value attribute is inverted and, depending on the new value, the flag image is displayed or not.

This principle allows you to use the form object to save the on/off state and avoids variable control for this. It's easier to deploy...

Set up check boxes

To change them, you just need to change both images.

And to deal with the problems of aligning the left-side box, perhaps a box will be added at the top of the image with a transparent background, or a CSS code will be used to align the wording.

This code can be used as it is if all the checkboxes are initially cleared, otherwise you either need to add CSS code for the preset checkboxes or create a JavaScript function to initialize the checkboxes based on their status.

Get rid of JavaScript?

To get rid of JavaScript, you need to use the [type = checkbox] attribute selectors and the pseudo-class: checked or the second [checked] attribute selector.
Only this is not supported by all browsers.

Loading

Reference