Jump to content
crazyswede

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

 

Share this post


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>

Share this post


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>

Share this post


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;
}

 

Share this post


Link to post
Share on other sites

Or target inputs of type checkbox or and radio

[type="checkbox"], [type="radio"] {
height:20px; 
width:20px;
}

 

Share this post


Link to post
Share on other sites

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.

 

Share this post


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

Share this post


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...