Jump to content

increase the size  of radio buttons and checkboxes


crazyswede

Recommended Posts

How can I increase the size  of radio buttons and checkboxes, as well as the text size within text boxes and that within text-area boxes? I used the HTML command <FONT SIZE= ? > to increase the size, and it increases the size  of the text, all right, but not the size of any of the above command buttons

 

Link to comment
Share on other sites

The font tag is prehistoric old school, you have to use a custom radio, checkboxs to change to a design you want (google custom radio, checkboxes). Applying style inline to each elements is style="font-size: 2em;" or use inline stylesheet

<style>

input, textarea {

font-size: 2em;

}

</style>

Placed between <head>...</head>

Link to comment
Share on other sites

 
 

Okay, here's what I found. You can copy This code and paste it and try it. 

<HTML>
  <HEAD>
   
<TITLE>
  enlarge commands
  </TITLE>
   
  </HEAD>
   
   
  * Large radio buttons:
  <input type="radio" name="actionn" value= "savedoc" style="height:20px; width:20px; vertical-align: middle;" CHECKED >
  <p>
  * Large check boxes:
  <input type="checkbox" name="actionn" value= "backup" style="height:20px; width:20px; vertical-align: middle;" >
  <p>
   
  <style> input, textarea { font-size: 3em;} </style>
   
  <textarea name="Edited" >
  Large textarea boxes
  </textarea>
  <p>
   
   
   
  <input type="text" name= "selectstring" value="Large text boxes" size= 15 >
   
  </BODY>
  </HTML>
Link to comment
Share on other sites

You can use inline css like that:

<input type="radio" name="click" value= "save" style="height:20px; width:20px; vertical-align: middle;" CHECKED >

Or you can provide class name to  particular input like 

Html:

<input type="radio" name="click" value= "save" class="checkbox" CHECKED >

Css:

.chexkbox{
height:20px; 
width:20px;
}

 

Link to comment
Share on other sites

  • 1 month later...

OK.  Just tried in Chrome and it does change size of display.

I had initially tested with FF and there is no change to display size.  (Using version 78.0.2)
Unclear as to why the difference.  Untested with other browsers.

 

Link to comment
Share on other sites

Because as i said it is very difficult to style these, each browser has there own different ways of styling. Actually i did this through android firefox, and it works fine. But not in desktop firefox. So like i said customize as i shown.

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...