Tag Archives: HTML Form

CSS, HTML

CSS – Number rating widget

Leave a comment

I have a HTML form which has radio inputs range from 1 to 5:

<form>
  <input type="radio" name="num" value="1" checked>1
  <input type="radio" name="num" value="2">2
  <input type="radio" name="num" value="3">3
  <input type="radio" name="num" value="4">4
  <input type="radio" name="num" value="5">5
</form>

 

I want to convert it into a rating widget. I found a very good post with an example to convert radio inputs into a star rating widget.

Code by Stephen Morley – A star rating widget using CSS

But instead of rating by stars, i would like to create a number rating widget. So i modified the example a bit. First, create a image as follow.
icon_number_widget.png
icon_number_widget
Continue reading CSS – Number rating widget →

Advertisements
CMS

Drupal 7 – Styling checkbox and radio button in Webform

18 Comments

Yesterday we talked about styling the checkbox and radio button as suggested by Ryan Fait.
Styling checkbox and radio button with CSS and Javascript

Here is a simple solution for applying the checkbox and radio button in Drupal 7 webform.

1. Upload the radio.png, checkbox.png and select.png to your subtheme. (Omega subtheme is used in this example.)

checkbox
radio
select

 
Continue reading Drupal 7 – Styling checkbox and radio button in Webform →

CSS, HTML, Javascript

Styling checkbox and radio button with CSS and Javascript

1 Comment

I want to style the form elements such as radio button, checkbox or selection list. Google shows me a very good tutorial written by Ryan Fait.
Las Vegas Web Design – Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements

In the above tutorial, those form elements will be replaced by a span element. It works great. Only 1 minor problem which is those span elements could not align well. So i made some change on the CSS. Here is my example.
Continue reading Styling checkbox and radio button with CSS and Javascript →