CSS cross-browser positioning of form elements

Question

Has anyone come up with a strategy for styling form elements that works cross-browser? For me, textfields and textareas are usually not a problem, but checkboxes , radio buttons , and selects (dropdowns) create havoc.

I don't need these things to look identical in the various browsers. But I'd like to be able to line them up predictably. I'd like to be able to put a checkbox below a textfield and have it line up with the left edge of the textfield . If this works in Safari , then it doesn't in Firefox : there the checkbox ends up below the center of the textfield . Sometimes the vertical placement can differ by 48px or more.

I have Opera on my Apple iMac , on my PC desktop computer with Windows XP Pro , and on a PC laptop with Windows 7 (in each case, the newest version of Opera ). In order to position the checkboxes I had to individually target each of these machines.

Select fields (dropdowns) give me the same headaches. Often they're okay in some browsers, but on others they end up on top of a checkbox or textfield , or 60px to the left or right.

The one thing I really haven't tried is CSS reset, since Eric Meyer has said he doesn't use it for forms. Has anyone else tried it with success? Is there any reliable way to build a form with generally uniform styling? I don't even mind identifying the user agent and delivering specific CSS . But when the same browsers render the elements differently on computers of different screen size, the problem becomes overwhelming.

Yet clearly there's an answer, because a lot of forms on the web seem to work cross-browser. Can anyone give me a hand?

Thanks.

Mark

Answer 1

The Basic idea for customizing the form elements for better UI of it is not 100% accurate in css, it is because the form elements styling depends upon the OS in the system, it embeds the default css of the OS for the browser...

For instance, the radio button, checkboxs, selects, input, textarea they all fetches default css of OS depends upon the browser...

Their is no solution but a making a different UI for the form element with jquery. Like i am currently on Jquery mobile framework, this is Touch-Optimized Web for mobile and tablets. They have customized the whole UI for the form element with divs, spans, anchors etc with jquery and css3...

Refer:- http://view.jquerymobile.com/1.3.1/demos/widgets/forms/

Form structure in html:-

<fieldset data-role="controlgroup">
    <legend>Radio buttons, vertical controlgroup:</legend>
        <input name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" type="radio">
        <label for="radio-choice-1">Cat</label>
        <input name="radio-choice-1" id="radio-choice-2" value="choice-2" type="radio">
        <label for="radio-choice-2">Dog</label>
        <input name="radio-choice-1" id="radio-choice-3" value="choice-3" type="radio">
        <label for="radio-choice-3">Hamster</label>
        <input name="radio-choice-1" id="radio-choice-4" value="choice-4" type="radio">
        <label for="radio-choice-4">Lizard</label>
</fieldset>

Form structure showing on browser:-

<div class="ui-controlgroup-controls">
  <div class="ui-radio">
    <input type="radio" checked="checked" value="choice-1" id="radio-choice-1" name="radio-choice-1">
    <label for="radio-choice-1" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="radio-on" data-theme="c" data-mini="false" class="ui-radio-on ui-btn ui-btn-corner-all ui-fullsize ui-btn-icon-left ui-first-child ui-btn-up-c"><span class="ui-btn-inner"><span class="ui-btn-text">Cat</span><span class="ui-icon ui-icon-radio-on ui-icon-shadow">&nbsp;</span></span></label>
  </div>
  <div class="ui-radio">
    <input type="radio" value="choice-2" id="radio-choice-2" name="radio-choice-1">
    <label for="radio-choice-2" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="radio-off" data-theme="c" data-mini="false" class="ui-radio-off ui-btn ui-btn-corner-all ui-fullsize ui-btn-icon-left ui-btn-up-c"><span class="ui-btn-inner"><span class="ui-btn-text">Dog</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow">&nbsp;</span></span></label>
  </div>
  <div class="ui-radio">
    <input type="radio" value="choice-3" id="radio-choice-3" name="radio-choice-1">
    <label for="radio-choice-3" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="radio-off" data-theme="c" data-mini="false" class="ui-radio-off ui-btn ui-btn-corner-all ui-fullsize ui-btn-icon-left ui-btn-up-c"><span class="ui-btn-inner"><span class="ui-btn-text">Hamster</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow">&nbsp;</span></span></label>
  </div>
  <div class="ui-radio">
    <input type="radio" value="choice-4" id="radio-choice-4" name="radio-choice-1">
    <label for="radio-choice-4" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="radio-off" data-theme="c" data-mini="false" class="ui-radio-off ui-btn ui-btn-corner-all ui-fullsize ui-btn-icon-left ui-last-child ui-btn-up-c"><span class="ui-btn-inner"><span class="ui-btn-text">Lizard</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow">&nbsp;</span></span></label>
  </div>
</div>

The UI change by jquery and css3 for better looking UI what i am trying to say, simply take this as example to understand whats the idea behind the issue?

Answer 2

• Checkbox and radio buttons can't be positioned (vertically) with their labels cross-browser. You've to rely on some proprietary or CSS hack stuff.
  That's not as bad as it could appear: I despise using CSS hacks for layout but for translating 1px vertically a button on some browser: who seriously cares if another browser is falsely targeted and a radio button is moved 1px?

• You still can custom the style of these form elements. The most accessible way I could find is here: http://www.filamentgroup.com/examples/customInput/
  Radio and checkbox are hidden under the background images of the labels. With or without CSS and images, it still works as well as in screen readers.

• I don't use CSS resets (overkill for my use, just Knacss which is very light on purpose) and for forms I use the very good work of isellsoap forms.css - Consistent looking forms across all major browsers .
  I tried to remove each single line of their CSS and that's how I understood how f**up modern browsers are when it comes to forms. The gold medal goes to Chrome, when you understand that nothing else than -webkit-appearance: none will let you style anything and that from here you've to rebuild everything from scratch (well, isellsoap did that hard work).

• If you want to align vertically on the same line a label and an input[type="text"], then stick to vertical-align: middle . Browser and CSS will take care of alignments for you... top value is the beginning of the need of a different padding on each element you'll encounter. Still necessary if a label goes on two lines for example.

EDIT: I've never seen a 48px-misplacement or 60px on left/right (except with absolute positioning on IE6/7 and its buggy behaviour). Do you've a fiddle for this and the precise browser+OS combination where it can be seen?

Answer 3

user agents typically render form controls differently, something i think that dom shadow and web components api is going to fix for us....at the moment you have a plethora of libs that style controls cross-browser...but the end all is formalize.css; it supports ie6+ and the other big 4 browsers out the box, and it also provides support for five js libs, whereas 99% of these solutions are jQuery only. formalize.css is the bomb. http://formalize.me/

Answer 4

here is the complete css for form fields cross browser test

form, fieldset, legend {
    margin:0;
    padding:0;
    border:none;
    line-height:normal;
}    
input[type="checkbox"] { 
    -moz-appearance: checkbox; -webkit-appearance: checkbox;
    margin-left:3px; border:0; 
    vertical-align: middle;    
    top: -1px;bottom: 1px;
    *overflow: hidden;}
input[type="radio"] { -moz-appearance: radio; -webkit-appearance: radio; }
input[type="search"] {
  -webkit-appearance: textfield;
}
input, button, textarea, select {
    font-family: inherit;
    font-size: inherit;
    color:#000000;
    font-size: 100%; /* for IE */
    padding:6px;
    margin:5px 0;
    border-radius:4px;
     -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -khtml-border-radius: 4px;
    *border-radius:4px; 
    -border-radius:4px; 
    border-radius:4px/8;
    -ms-border-radius: 4px;
    background:#fff;        
    text-transform:capitalize;
    box-sizing: border-box; 
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    -moz-appearance: none; -webkit-appearance: none;*/
}
input[type="submit"], input[type="reset"] {

    color:#fff; font-weight:bold;
    vertical-align:middle;
}
input[type="submit"]:hover, input[type="reset"]:hover {
        cursor:pointer;
}
button, input[type="submit"], input[type="image"], 
label > input[type="checkbox"]  {
    box-sizing: border-box; /* 1 */  
    *height: 13px; /* Removes excess padding in IE 7 */
    *width: 13px;
    backgorund: #fff; 
}
input[type="text"]:focus, 
input[type="password"]:focus, 
input[type="email"]:focus, 
textarea:focus, select:focus { outline:0;
}
input::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0; }
textarea {      
    resize:none;
    overflow: auto; /* Removes default vertical scrollbar in IE 6/7/8/9 */
    vertical-align: top; /* Improves readability and alignment in all browsers */
} 

/* placeholder and tooltip styles */
*::-webkit-input-placeholder, /* WebKit browsers */
*:-moz-placeholder, /* Mozilla Firefox 4 to 18 */
*::-moz-placeholder, /* Mozilla Firefox 19+ */
*:-ms-input-placeholder /* Internet Explorer 10+ */ {
color: #999; 
}

[placeholder]:focus::-webkit-input-placeholder,
[placeholder]:focus:-moz-placeholder { color:transparent; }


/* mantatory field  styles */
::-webkit-validation-bubble-message {
  padding: 1em;
}