Jump to content

increase the size  of radio buttons and checkboxes


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 post
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 post
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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...