My Checkboxes are ugly

HTML & CSS
1

I just spent over a week creating an interest form, and while it works great, the HTML Checkboxes make it look lame!! (Especially when they are “disabled” as seen below…)

Since HTML5 or JavaScript is not an option for this version, is there anything I can do to…

  • Make the Checkboxes LARGER so people can actually see them??

  • Make the Checkboxes DARKER so people can again actually see them?

  • Make the “check” more distinct?

I am so disappointed with how they look in my browser, that I am almost wondering if I could/should convert them to a Radio Button or something else?! :confused:

Suggestions?

2

Yes, give up trying.

Forms are notorious for being troublesome when it comes to styling.

The rationale being that forms should all display in the browser’s “native” style so that users won’t get confused.

That said, you could style to get the form to look “acceptable” in different browsers, but don’t expect whatever it is you think perfection would look like.

IMHO better to spend the time learning some simple basic JavaScript to make for a better user experience, which if you had tried doing when first suggested ~week ago you would have long been done with by now.

3

You give me too much credit!!!

It’ll take me months - if not years - to learn JavaScript… (I’m not the quickest learner…)

I plan on learning it maybe later this year, but I have more important priorities!!

So, back on topic, could I swap out my Checkboxes for Radio Buttons? (They tend to look pretty clear.)

Or could I use an image or is there some other quick fix?

4

You don’t need to learn all JavaScript to be able to do a validation script, especially since you can get help (if not he code written for you) here.

Anyway, what you are asking is if you should use certain HTML elements because of how they look.

That may have been common practice decades ago, but now using “semantic” tags is more important.
i.e. use the right tag for the right job.

5

Radio buttons are used to indicate a single choice from many, where checkboxes may be used to select one or more options.

Input types

1 Like
6

You’ve lost me…

JavaScript is a scripting language used to do things. I fail to see what it has to do with creating a pseudo-Checkbox.

Also, I thought you were saying earlier to NOT use Form Controls to display Form Control Data?!

So you have yet to tell me what I should display for Interests that were selected…

A heart? A duck? An “X”?

And how would I do that using HTML/CSS?

7

A quick Google revealed the following CSS without JavaScript which may be of interest:

http://cssdeck.com/labs/css-checkbox-styles

8

Sorry, I must have been thinking of another topic.
I thought you said they were not in a form, but being used to display the information.

9

I have a script with a form where a user can check/uncheck what he/she is interested in.

Then in the user’s profile, I display the results for others to see. There, I stripped out the actual form syntax but am using <input type='checkbox'>.

For symmetry, it makes sense to use the same control that were used for input for display in my opinion.

But I am open to finding another way to display some sort of “tick”, “X”, check, etc as long as it doesn’t require HTML5, JavaScript or something else that would be more trouble and risk on this last script for my client’s site.

P.S. Whatever I use, it should not be clickable or editable since I am display results and not accepting input!

10

What does your customer’s statement of requirements say? Do they have a style guide you can work with?

1 Like
11

In the user’s profile, are you displaying the user’s choices in a list or lists? If so, you can replace the common list markers with images that look like check marks or CSS shapes that would reflect the user’s selections. Have you ever substituted list markers with images or other shapes? Sounds to me like that would be a read-only way to display the user’s selections in a way that you could customize to your heart’s content.

2 Likes
12

Something like

<!DOCTYPE html> 
<html>
  <head>
    <title>input vs list</title>
	<style type="text/css">
	  body {
	    background-color: #badbee;
	  }	
	  li {
	    list-style-type: none;
	  }
	  li.fav::before {
	    content: '';
	    position: absolute; 
	    border-color: #333;
	    border-style: solid;
	    border-width: 0 0.2em 0.25em 0;
	    height: 1em;
	    margin-left: -1.5em;
	    transform: rotate(45deg);
	    width: 0.5em;
	  }
	</style>
  </head>
  <body>
    <h1>Form Inputs vs. List</h1>
    <h2>Form Inputs</h2>
    <form>
	  <input type="checkbox" checked="checked" />
      <input type="text" value="My Favorite Hobby" /><br />
	  <input type="checkbox" />
      <input type="text" value="Not My Favorite Hobby" /><br />
	  <input type="checkbox" checked="checked" />
      <input type="text" value="Another Favorite Hobby" />
    </form>
    <h2>List</h2>
	<ul>
	  <li class="fav">My Favorite Hobby</li>
	  <li>Not My Favorite Hobby</li>
	  <li class="fav">Another Favorite Hobby</li>
	</ul>  
  </body>
</html>

806×194 23.6 KB

3 Likes
13

Both my client and I like your standard HTML check-boxes.

What we don’t like is that they are too small proportionally to the surrounding text, and that when I “disable” them they turn gray making them even harder to see.

(Seriously, I have decent vision, and for a visually-impaired figuring out which ones are checked must be a real nightmare?!)

14

[quote=“ronpat, post:11, topic:116765, full:true”]
In the user’s profile, are you displaying the user’s choices in a list or lists? If so, you can replace the common list markers with images that look like check marks or CSS shapes that would reflect the user’s selections. Have you ever substituted list markers with images or other shapes?[/quote]

See Post #2 in this thread…

No, I have never replaced things with images.

Have any samples or links you could share with me? Sorry, I am clueless on this topic. (I had never even used a Check-box until a week ago!!) :blush:

15

Consider sprites. You can design/draw them to suit your fancy. And in this case, where you have check boxes on a form and a readout in the user’s profile, you could use the same sprites in both places so they look the same whether applied to the form element or the list item element.

For example (replace these with your customized checkboxes):

16

@mikey_w

Post #7 - Did you check out the link?

The demo, with source code, satisfies all your requirements about HTML5, javaScript, making the Checkboxes Larger, Darker and more distinct.

The solution is not a “one-liner” and will take a little effort to implement the source to your requirements.

1 Like
17

This JQ plugin works well and looks good… However, I recommend adding a class that removes padding

http://elmahdim.com/checkbo/

18

As John already said you can do this in CSS only for modern browsers and swap the checkbox out for a nice image of your own making. There are quite a few tutorials around and here are a few more.

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
http://www.csscheckbox.com/
http://www.thecssninja.com/css/custom-inputs-using-css

The technique is to hide the checkbox itself off-screen with css and then add the checkbox image to an associated label (associated labels will action the checkbox when clicked). You then use the :checkbox pseudo class as a trigger for supplying the appropriate image states (checked,unchecked,disabled)

3 Likes
19

Thanks for the link.

Unfortunately, I don’t feel like they fit in to my webpage stylistically.

20

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.