CSS Forum

**rfresh** · 06-27-2009, 02:04 AM

I'm trying to increase the overall size of my INPUT Text component but my code below doesn't change the size of it at all. I'm trying to make it larger so it shows up better on a PDA browser.

Thanks

PHP Code:


			
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style type="text/css">
.title_line {color:blue; font-weight:normal; font-size:450%}
input {
size: 100px;
}
</style>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<span class="title_line">Username</span>
<BR>
<INPUT TYPE="text" ID="id_username" NAME="frm_username">
</BODY>
</HTML>

**LadynRed** · 06-27-2009, 11:00 AM

So, add the text size styling to the input tag:

input{font-size: 200%;}

**rfresh** · 06-27-2009, 07:14 PM

Thank you, that led me in the right direction. While that worked for textbox it didn't work for checkboxes and radio buttons. My test code below all sizes up nicely (textbox and all the fonts) but the checkbox and the round radio buttons are still their original size - how can I increase their size too?

The lines

PHP Code:


			
.style.height = "300%"

don't work.

PHP Code:


			
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style type="text/css">
.title_line {color:blue; font-weight:normal; font-size:400%}
input {
font-size: 300%;
}
document.getElementById("id_rad_100").style.height = "300%";
document.getElementById("id_chk_100").style.height = "300%";
</style>
<TITLE>Test</TITLE>
</HEAD>
<BODY>
<INPUT TYPE="text" ID="id_textbox" NAME="frm_textbox"> <span class="title_line">Textbox</span>
<BR>
<INPUT TYPE="checkbox" ID="id_chk_100" NAME="chk_100"> <span class="title_line">Checkbox</span>
<BR>
<INPUT TYPE="radio" ID="id_rad_100" NAME="rad_100"> <span class="title_line">Radio 1</span>
<BR>
<INPUT TYPE="radio" ID="id_rad_100" NAME="rad_100"> <span class="title_line">Radio 2</span>
</BODY>
</HTML>

**GeekSpecialties** · 06-28-2009, 12:14 AM

I don't think you can. But you could use label, then when the text is clicked it will activate the checkbox/radio button.

http://www.w3schools.com/tags/tag_label.asp

**rfresh** · 06-28-2009, 12:37 PM

Label is not the solution I am seeking. I am trying to find a way to increase the size of a textbox, checkbox and radio button.

I've since found out I can use font-size to increase the textbox component but am still looking for a way to increase the checkbox and radio components.

**LadynRed** · 06-28-2009, 03:51 PM

You can't. There are some form elements that just cannot be sized that way, you're stuck with the defaults.

http://www.sitepoint.com/article/style-web-forms-css/
http://www.alistapart.com/articles/p...ccessibleforms

**rfresh** · 06-29-2009, 07:04 PM

Then that would mean there is an alternative way to make checkboxes look larger - hotmail uses checkboxes next to each email message that you can check and then delete. On my PDA those checkboxes are larger than the default/normal checkboxes. When I compare those checkboxes to my test pda screen checkboxes there is a large difference in their size. They must be using some other kind of 'trick' to pull that off.