I have radio buttons arranged in a table
<input type="radio" class="containerRadio">
In Chrome it is possible to select radio buttons – but not able to unselect them. [Which I understand as a standard behavior]
In IE it is not allowing me to select the radio buttons at all. [Tested in IE9].
I tried various approaches like giving name and value - but didn't get it resolved. Any idea how we can fix it?
<html>
<table id="tblValidContainers" border="0" cellpadding="0" cellspacing="0" style="width: 200px;
background-color: #E5DBE2; margin-left: 80px;">
<thead>
<tr>
<td class="Heading3" style="width: 120px;" align="center">
Container ID
</td>
<td class="Heading3" style="width: 80px;" align="center">
Receive
</td>
</tr>
</thead>
<tbody>
<tr class="Normal">
<td align="center" style="padding-left: 5px">
<div class="divContainerIDWrapper" name="a" value = "a"> ~~3957515 </div>
</td>
<td align="center" style="padding-left: 5px">
<input type="radio" class="containerRadio">
</td>
</tr>
<tr class="Normal">
<td align="center" style="padding-left: 5px">
<div class="divContainerIDWrapper" name="b" value = "c"> ~~3957514 </div>
</td>
<td align="center" style="padding-left: 5px">
<input type="radio" class="containerRadio">
</td>
</tr>
<tr class="Normal">
<td align="center" style="padding-left: 5px">
<div class="divContainerIDWrapper"> ~~3957513 </div>
</td>
<td align="center" style="padding-left: 5px">
<input type="radio" class="containerRadio">
</td>
</tr>
<tr class="Normal">
<td align="center" style="padding-left: 5px">
<div class="divContainerIDWrapper"> ~~3957512 </div>
</td>
<td align="center" style="padding-left: 5px">
<input type="radio" class="containerRadio">
</td>
</tr>
<tr class="Normal">
<td align="center" style="padding-left: 5px">
<div class="divContainerIDWrapper"> ~~3957511 </div>
</td>
<td align="center" style="padding-left: 5px">
<input type="radio" class="containerRadio">
</td>
</tr>
<tr class="Normal">
<td align="center" style="padding-left: 5px">
<div class="divContainerIDWrapper"> ~~3957510 </div>
</td>
<td align="center" style="padding-left: 5px">
<input type="radio" class="containerRadio">
</td>
</tr>
<tr class="Normal">
<td align="center" style="padding-left: 5px">
<div class="divContainerIDWrapper"> ~~3957509 </div>
</td>
<td align="center" style="padding-left: 5px">
<input type="radio" class="containerRadio">
</td>
</tr>
</tbody>
</table>
</html>
So what you're trying to do is a checkbox that has a look and feel as a radio-button am I wrong?
If so, the checkbox four on this page might be what you're looking for, with a different CSS.
And, here's the whole demo of all checkboxes he has made.
I added a possible example of this other page I found. Look at this JSFiddle.
HTML
<h3>CSS3 Custom Checkbox</h3>
<div class="checkbox">
<input type="checkbox" value="check1" name="check" id="check1">
<label for="check1">Checkbox No. 1</label>
<br>
<input type="checkbox" value="check2" name="check" id="check2">
<label for="check2">Checkbox No. 2</label>
</div>
CSS
label {
cursor: pointer;
display: inline-block;
font-size: 13px;
margin-right: 15px;
padding-left: 25px;
position: relative;
}
.wrapper {
margin: 50px auto;
width: 500px;
}
input[type="radio"], input[type="checkbox"] {
display: none;
}
label:before {
background-color: #aaa;
bottom: 1px;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3) inset, 0 1px 0 0 rgba(255, 255, 255, 0.8);
content: "";
display: inline-block;
height: 16px;
left: 0;
margin-right: 10px;
position: absolute;
width: 16px;
}
.checkbox label:before {
border-radius: 8px;
}
input[type="checkbox"]:checked + label:before {
color: #f3f3f3;
content: "•";
font-size: 30px;
line-height: 18px;
text-align: center;
}
You cannot unselect radio buttons. That's because they're used if you want the user to select either option1 or option2 or option3 but prohibit selecting multiple values or leaving it empty (e.g. in case of selecting a Gender).
See Specification at w3c:
when one is switched "on", all others with the same name are switched "off".
To unselect "male" if "female" is selected, you have to tell the browser that the radios belong to the same group. That's done by adding the name-attribute:
<input checked type="radio" name="sex" value="male">
<input type="radio" name="sex" value="female">
if you wish to give the user the possibility of boxes he can check/uncheck as he likes (e.g. "want to receive our newsletter?"), you should use type="checkbox".
Radio buttons get their name from the old-style car radios where you physically pushed one of a group of buttons to change the station. You can only listen to one station at a time, so only one radio button can be pressed at a time.
"input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices" [see Radio Buttons]
Following is what I did to resolve the issue.
Added name property to all the radio buttons
Made sure that the names are distinct for each radio button. [Since I need to select multiple radio buttons at once, based on the requirement - though the intention of "radio" button is not to do so]
Wikipedia says:
A radio button or option button is a graphical control element that allows the user to choose only one of a predefined set of options, an exclusive or.
Etymology
Radio buttons were named after the physical buttons used on older car radios to select preset stations – when one of the buttons was pressed, other buttons would pop out, leaving the pressed button the only button in the "pushed in" position.
Everything is correct you just need to add name attribute to all radio buttons. All of them should have the same name.
Example:
<input type="radio" name="one" class="containerRadio">
<input type="radio" name="one" class="containerRadio">
Radio button are meant to provide functionality of selecting only one at a time. If you want to select multiple, you have to use checkbox.
Example:
<input type="checkbox" name="two" class="containercheckbox">
<input type="checkbox" name="two" class="containercheckbox">
Related
How it looks:
enter image description here
I wanted labels with dynamic size so for example 'Very strongly uncomfortable' changes
Very
Strongly
uncofortable
[input]
Im really not experienced when it comes to css
<div class="w-50 d-flex justify-content-between answer-box">
<div *ngFor="let label of labels; index as id" class="text-center question-label">
<span class="mr-2">{{label}}</span>
<div class="radio">
<label style="font-size: 2.5em">
<input type="radio" [value]="id+1" formControlName="value">
<span class="cr"><i class="cr-icon fa fa-check"></i></span>
</label>
</div>
</div>
</div>
When i somehow managed to split text, then checkboxes are on different height when there is no label.
Try something like this:
html:
<table class="cBox">
<tr>
<td width="10px" >Very Strongly uncofortable</td>
<td width="20px">Uncertain </td>
<td width="20px">No Answer </td>
</tr>
<tr>
<td><input type="checkbox"/> </td>
<td><input type="checkbox" /> </td>
<td><input type="checkbox"/> </td>
</tr>
</table>
CSS:
.cBox {
text-align: center;
padding: 5px;
}
Desired Behaviour
I have 35 tables containing 6 checkboxes each.
I am using this CSS in order to style their checked and unchecked states:
http://www.csscheckbox.com/checkbox/20695/paperclip-style-thin-css-checkbox/
When using more than 1 instance of a table, the CSS only seems to work (ie apply the correct checked and unchecked states) when each checkbox has a unique name, id and label.
I want to achieve the same effect without having to type a unique name, id and label for all of the 210 checkboxes in the 35 tables.
JSFiddle
http://jsfiddle.net/rwone/8edb0j0g
What I've Tried
In the example below I have shown 2 table instances where each checkbox has a unique name, id and label.
Giving them the same "identifiers" prevents functionality, as does removing them altogether.
table {
display: inline-block;
}
/* from:
http://www.csscheckbox.com/checkbox/20695/paperclip-style-thin-css-checkbox
*/
input[type=checkbox].css-checkbox {
position: absolute;
z-index: -1000;
left: -1000px;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
input[type=checkbox].css-checkbox + label.css-label {
padding-left: 22px;
height: 17px;
display: inline-block;
line-height: 17px;
background-repeat: no-repeat;
background-position: 0 0;
font-size: 17px;
vertical-align: middle;
cursor: pointer;
}
input[type=checkbox].css-checkbox:checked + label.css-label {
background-position: 0 -17px;
}
label.css-label {
background-image: url(http://csscheckbox.com/checkboxes/u/csscheckbox_a1e28825bac3d82a32f547300c847628.png);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<table>
<tr>
<td class="area_checkbox">
<input type="checkbox" name="checkboxG1" id="checkboxG1" class="css-checkbox" />
<label for="checkboxG1" class="css-label">area 01</label>
</td>
</tr>
<tr>
<td class="area_checkbox">
<input type="checkbox" name="checkboxG2" id="checkboxG2" class="css-checkbox" />
<label for="checkboxG2" class="css-label">area 02</label>
</td>
</tr>
<tr>
<td class="area_checkbox">
<input type="checkbox" name="checkboxG3" id="checkboxG3" class="css-checkbox" />
<label for="checkboxG3" class="css-label">area 03</label>
</td>
</tr>
<tr>
<td class="area_checkbox">
<input type="checkbox" name="checkboxG4" id="checkboxG4" class="css-checkbox" />
<label for="checkboxG4" class="css-label">area 04</label>
</td>
</tr>
<tr>
<td class="area_checkbox">
<input type="checkbox" name="checkboxG5" id="checkboxG5" class="css-checkbox" />
<label for="checkboxG5" class="css-label">area 05</label>
</td>
</tr>
<tr>
<td class="area_checkbox">
<input type="checkbox" name="checkboxG6" id="checkboxG6" class="css-checkbox" />
<label for="checkboxG6" class="css-label">area 06</label>
</td>
</tr>
</table>
<!-- second table here -->
<table>
<tr>
<td class="area_checkbox">
<input type="checkbox" name="checkboxG7" id="checkboxG7" class="css-checkbox" />
<label for="checkboxG7" class="css-label">area 01</label>
</td>
</tr>
<tr>
<td class="area_checkbox">
<input type="checkbox" name="checkboxG8" id="checkboxG8" class="css-checkbox" />
<label for="checkboxG8" class="css-label">area 02</label>
</td>
</tr>
<tr>
<td class="area_checkbox">
<input type="checkbox" name="checkboxG9" id="checkboxG9" class="css-checkbox" />
<label for="checkboxG9" class="css-label">area 03</label>
</td>
</tr>
<tr>
<td class="area_checkbox">
<input type="checkbox" name="checkboxG10" id="checkboxG10" class="css-checkbox" />
<label for="checkboxG10" class="css-label">area 04</label>
</td>
</tr>
<tr>
<td class="area_checkbox">
<input type="checkbox" name="checkboxG11" id="checkboxG11" class="css-checkbox" />
<label for="checkboxG11" class="css-label">area 05</label>
</td>
</tr>
<tr>
<td class="area_checkbox">
<input type="checkbox" name="checkboxG12" id="checkboxG12" class="css-checkbox" />
<label for="checkboxG12" class="css-label">area 06</label>
</td>
</tr>
</table>
It might be useful for you if I briefly describe what trickery is being employed here. The unstyled checkbox is being hidden because its associated label is placed over the top of it. Checkboxes have functionality built in where if you click their associated label they become toggled on, so by clicking the label with the fake checkbox image, you're able to toggle the hidden checkbox on. There's CSS rules to change the fake checkbox image based on whether the hidden checkbox is checked or not.
So the answer to your question is ... sort of. You don't need the name field if you just want the toggle effect, but that's what's referenced when you do a form submission, so you probably will need it later.
The ID on your checkbox is necessary because the ID field is what the label's for attribute references, and you need a relationship between the label and the checkbox as I previously mentioned.
Certain fields are inherently unique; names, id's and label names. You are never supposed to have more than one element with the same name/id/label.
While you could assign more than one checkbox a duplicate of any of these fields, it would be bad practice to do so; it would be an attempt to use an identifier in a way that it is not intended to be used.
In the case that you have multiple elements requiring the same styling properties, classes are then used. Classes are meant to be used in the case that you want to reuse certain styling properties.
Imagine this scenario:
You have two identical checkboxes...
<input type="checkbox" name="checkboxG6" id="checkboxG6" class="css-checkbox" />
<label for="checkboxG6" class="css-label">area 06</label>
.......
<input type="checkbox" name="checkboxG6" id="checkboxG6" class="css-checkbox" />
<label for="checkboxG6" class="css-label">area 07</label>
In this case, the HTML and CSS are both looking for a unique name/id/label. But that truly doesn't exist. How is it supposed to know which one you are referencing? It can't make this decision and therefore neither of them is assigned the styling properties. That is why the fields must be unique.
Suggestion Going Forward
If you don't want to manually set each checkbox, I would check out AngularJS. It makes doing tasks like this extremely easy; you can define rules and use pre-existing directives in your HTML that make it extremely hassle-free.
In AngularJS, you could do something like the following: AngularJS Checklist-model
I just started coding a small page for myself after not doing any web design for a couple of years. As I now learned, laying out the page with tables is not state-of-the-art anymore (not sure if it ever really was).
Now I am trying to layout my page with CSS but couldn't find anything on:
How to align 7 checkboxes horizontally and put the corresponding label centered below the checkboxes?
How to align 2 selects horizontally and put the corresponding label centered above the selects?
The initial pure table-code was the following:
.form fieldset {
display: table;
border: 1px solid #c6c7cc;
border-radius: 5px;
}
.form label {
display: table-cell;
text-align: right;
padding: 5px;
}
.form input,
.form select {
display: table-cell;
}
.form .cssRow {
display: table-row;
}
.form .submit {
display: table-cell;
caption-side: bottom;
display: table-caption;
text-align: center;
}
<table>
<tr>
<td align="right">Name</td>
<td align="left">
<input name="name" type="text">
</td>
</tr>
<tr>
<td align="right">Day(s) of week</td>
<td align="center">
<table>
<tr>
<td align="center">
<input type="checkbox" name="day[]" value="mo" checked>
</td>
<td align="center">
<input type="checkbox" name="day[]" value="tu" checked>
</td>
<td align="center">
<input type="checkbox" name="day[]" value="we" checked>
</td>
<td align="center">
<input type="checkbox" name="day[]" value="th" checked>
</td>
<td align="center">
<input type="checkbox" name="day[]" value="fr" checked>
</td>
<td align="center">
<input type="checkbox" name="day[]" value="sa" checked>
</td>
<td align="center">
<input type="checkbox" name="day[]" value="su" checked>
</td>
</tr>
<tr>
<td align="center">Mo</td>
<td align="center">Tu</td>
<td align="center">We</td>
<td align="center">Th</td>
<td align="center">Fr</td>
<td align="center">Sa</td>
<td align="center">Su</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="right">Validity</td>
<td align="center">
<table>
<tr>
<td>Valid from</td>
<td>Valid to</td>
</tr>
<tr>
<td>
<select>
<option>January</option>
<option>February</option>
</select>
</td>
<td>
<select>
<option>January</option>
<option>February</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" name="submit" value="Refresh">
</td>
</tr>
</table>
My CSS attempt so far looks like this:
<div class="form">
<fieldset>
<legend>Search</legend>
<div class="cssRow">
<label for="name">Name</label>
<input name="name" type="text" size="30" maxlength="30">
</div>
<div class="cssRow">
<label for="day[]">Day(s) of week</label>
<input name="day[]" type="text" value="ToDo" size="30" disabled>
</div>
<div class="cssRow">
<label>Validity</label>
<input type="text" value="ToDo" size="30" disabled>
</div>
<div class="submit">
<input type="submit" name="submit" value="Suchen">
</div>
</fieldset>
</div>
To illustrate my problem, I created the following JSFiddle: http://jsfiddle.net/c9a7ezyk/
Any suggestions are welcome, although I prefer a simple solution, as I am just (re)learning HTML and CSS.
I prefer a slightly different approach to the other answer, where the <input> element is nested inside of a <label>, this implicitly associates the label with the input to give all kinds of nice bonuses.
It also makes for a simpler to follow markup, with less nested containers.
Example
<label>
<input type="checkbox">
<span class="label">Sunday</span>
</label>
And then
label {
display: inline-block;
text-align: center;
}
span.label {
display: block;
}
Notice how clicking the labels check the associated checkbox properly. Selects behave exactly the same way. Because <input> and <select> are inlines by default, it means that they'll be affected by text-align: center.
Checkbox with label:
<div class="checkbox-label">
<label for="checkbox">Sunday</label>
<div class="checkbox-container">
<input name="checkbox" type="checkbox">
</div>
</div>
.checkbox-label {
display: inline-block
}
.checkbox-container {
text-align: center;
}
Notice that the checkbox is inline so you can put it in a container and use text-align: center
Also notice that I use display: inline-block on .checkbox-label so that they can be aligned horizontally (block elements, default for div, takes up a whole line and drops the following element beneath it)
I use the same principals for the selects
You can see the whole thing here:
http://codepen.io/Vall3y/pen/QwdWOe
Semantic Purity
I am a bit of an HTML purist, so here is an HTML form without any extra markup:
The legends are floated to the left and vertically centered using a line-height that matches the legends height
The inputs are wrapped in a label with display: inline-block which is given a width to force the text below / above the input
The fieldset:before properties allow us to vertically center the labels with vertical-align: middle
Full Example
The background colours are just to illustrate the layout.
* {
margin: 0;
padding: 0;
}
fieldset {
border: none;
height: 70px;
}
fieldset:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
background: #F90;
width: 0;
}
legend {
height: 100%;
line-height: 70px;
width: 150px;
text-align: center;
background: #F90;
float: left;
}
input[type=checkbox] {
margin: 0 5px;
}
.days label {
background: #F90;
width: 30px;
display: inline-block;
vertical-align: middle;
text-align: center;
}
.validity label {
background: #F90;
width: 100px;
display: inline-block;
vertical-align: middle;
text-align: center;
}
<form>
<fieldset class="days">
<legend>Day(s) of Week</legend>
<label for="monday">
<input type="checkbox" id="monday" />Mo
</label>
<label for="tuesday">
<input type="checkbox" id="tuesday" />Tu
</label>
<label for="wednesday">
<input type="checkbox" id="wednesday" />We
</label>
<label for="thursday">
<input type="checkbox" id="thursday" />Th
</label>
<label for="friday">
<input type="checkbox" id="friday" />Fr
</label>
<label for="saturday">
<input type="checkbox" id="saturday" />Sa
</label>
<label for="sunday">
<input type="checkbox" id="sunday" />Su
</label>
</fieldset>
<fieldset class="validity">
<legend>Validity</legend>
<label for="from">Valid From
<select id="from">
<option>Option</option>
</select>
</label>
<label for="to">Valid to
<select id="to">
<option>Option</option>
</select>
</label>
</fieldset>
</form>
Demo here
Here is the code:
<html>
<body>
<div>Name <input type="text"></input></div><br>
<div>Day(s) of week</div>
<div style="margin-left: 120px;margin-top: -25px;">
<div><input type="checkbox" checked><br>Mo</input></div>
<div style="
width: 10px;
margin-left: 30px;
margin-top: -37px;">
<input type="checkbox" checked><br>Tu</input></div>
<div style="
width: 10px;
margin-left: 60px;
margin-top: -37px;">
<input type="checkbox" checked><br>We</input></div>
<div style="
width: 10px;
margin-left: 90px;
margin-top: -37px;">
<input type="checkbox" checked><br>Th</input></div>
<div style="
width: 10px;
margin-left: 120px;
margin-top: -37px;">
<input type="checkbox" checked><br>Fr</input></div>
<div style="
width: 10px;
margin-left: 150px;
margin-top: -37px;">
<input type="checkbox" checked><br>Sa</input></div>
<div style="
width: 10px;
margin-left: 180px;
margin-top: -37px;"><input type="checkbox" checked><br>Su</input>
</div>
</div>
<br>
<div>Validity
<select>
<option>January</option>
<option>February</option>
</select>
<select>
<option>January</option>
<option>February</option>
</select>
</div>
</body>
</html>
I want to have three check boxes and their label in a single line as I have shown below.
I tried having check boxes inside table cells but the label is coming above the check box.I am a beginner in HTML.
So please provide me with a possible solution.
Thanks in advance!!!
USA[]----------------------------------ENGLAND[]----------------------------------AUSTRALIA[]
Here, by [] - I mean a check box.These three columns should uniformly occupy the html form's width.
Here i have used ---------------------------- to show that I want this much space between a check box of the first and label of the second.
you can use either table or div,span
for table
<table>
<tr>
<td>
<label>Hindi</label>
<input type="checkbox"/>
</td>
<td>
<label>English</label>
<input type="checkbox"/>
</td>
<td>
<label>French</label>
<input type="checkbox"/>
</td>
</tr>
</table>
But by using div,span you have to wright down some Style.
if you are using framework Bootstrap you can see more with less css here
Here is Fiddle
... or you can use a 1 x 1 table and keep it simple! You will be able to apply limited styling to each element using this approach.
<table>
<tr>
<td>USA</td>
<td><input type="checkbox" name="country1"></td>
<td>India</td>
<td><input type="checkbox" name="country2"></td>
<td>Greece</td>
<td><input type="checkbox" name="country3"></td>
</tr>
</table>
You can have all this elements in single div with its display:inline. With 3 child divs having uniform widths.
<div style="display:inline" style=" width:100%">
<div style=" width:33%; float:left">USA<input type="checkbox"></div>
<div style=" width:33%;float:left">ENGLAND<input type="checkbox"></div>
<div style=" width:33%;float:left">Australia<input type="checkbox"></div>
</div>
If you post the code for the table that you did, we can help you better, but you can do it like this:
<table style="width: 100%;">
<tr>
<td><div style="white-space: normal;">USA<input type="checkbox" /></div></td>
<td><div style="white-space: normal;">ENGLAND<input type="checkbox" /></div></td>
<td><div style="white-space: normal;">AUSTRALIA<input type="checkbox" /></div></td>
</tr>
</table>
You can also do like this
<div style="float:left;width:100px;">
<label>Hindi</label>
<input type="checkbox"/>
</div>
<div style="float:left;width:100px;" >
<label>English</label>
<input type="checkbox"/>
</div>
<div style="float:left;width:100px;">
<label>French</label>
<input type="checkbox"/>
</div>
Demo http://jsfiddle.net/7kzh9/1/
HTML
<form>
<div class="chk">
<label><input type="checkbox" /> USA</label>
</div>
<div class="chk">
<label><input type="checkbox" /> ENGLAND</label>
</div>
<div class="chk">
<label><input type="checkbox" /> AUSTRALIA</label>
</div>
<form>
CSS
.chk
{
float:left;
display:inline-block;
width:100px;
}
label {
display: block;
padding-left: 15px;
text-indent: -15px;
}
input {
width: 13px;
height: 13px;
padding: 0;
margin:0;
vertical-align: bottom;
position: relative;
top: -1px;
*overflow: hidden;
}
Fiddle
Output:
I'm trying to right-align a dropdownlist similar to my textfields.
It works in firefox and IE, but I can't figure it out why it wont align properly in chrome.
HTML
<div id="metaDataEditInner">
<label>Document name</label>
<input class="field"></input>
<label>Document description</label>
<input class="field"></input>
<label>Document remarks</label>
<input class="field"></input>
<label>Document type</label>
<select class="dropdownfield">
</select>
<br />
<div style="clear:both">
<button id="test" class="defaultButton">Save metadata
</button>
</div>
</div>
CSS
#metaDataEditInner
{
margin: .5em 5px;
text-align: right;
width: 550px;
}
#metaDataEditInner label
{
float: left;
line-height: 1em;
margin-top: 3px;
}
#metaDataEditInner .field
{
border: 1px solid black;
width: 350px;
font-size: 12px;
line-height: 1em;
padding: 4px;
margin-bottom: 10px;
}
#metaDataEditInner .dropdownfield
{
border: 1px solid black;
width: 360px;
font-size: 12px;
line-height: 1em;
padding: 4px;
margin-bottom: 10px;
color:Black;
}
Any idea's ?
I've made a fiddle to illustrate the problem
http://jsfiddle.net/ZE5ss/2/
Thx!
I didn't want a say but if i saw you markup it's totally wrong.
1) Always put form element inside <form>.
2) input & button is an self closing element. Write like this:
<input class="field" />
<button id="test" class="defaultButton" value="Save metadata" />
3) select is not work without option Tag. Write like this:
<select class="dropdownfield">
<option></option>
</select>
Just remove the <br /> after the </select>. Works for me on chrome, see this fiddle.
Try this code its working fine in all the browsers:
<div id="metaDataEditInner">
<table>
<tr>
<td>
<label>Document name</label>
</td>
<td>
<input class="field"></input>
<tr>
<td>
<label>Document description</label>
</td>
<td>
<input class="field"></input>.
<tr>
<td>
<label>Document remarks</label>
</td>
<td>
<input class="field"></input>
<tr>
<td>
<label>Document type</label>
</td>
<td>
<select class="dropdownfield">
</select>
<tr>
<td> </td>
<td>
<button id="test" class="defaultButton">Save metadata
</button>
</tr>
</table>
</div>