crazyswede Posted May 27, 2020 Share Posted May 27, 2020 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 More sharing options...
dsonesuk Posted May 28, 2020 Share Posted May 28, 2020 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 More sharing options...
robthewildman Posted June 4, 2020 Share Posted June 4, 2020 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 More sharing options...
dsonesuk Posted June 4, 2020 Share Posted June 4, 2020 You are limited on what you can do with radio/checkbox inputs, that is why i mention custom radio and checkbox here is quick example i came up with https://www.w3schools.com/code/tryit.asp?filename=GFH2MCWONJ3A Link to comment Share on other sites More sharing options...
ishan_shah Posted June 8, 2020 Share Posted June 8, 2020 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 More sharing options...
dsonesuk Posted June 8, 2020 Share Posted June 8, 2020 Or target inputs of type checkbox or and radio [type="checkbox"], [type="radio"] { height:20px; width:20px; } Link to comment Share on other sites More sharing options...
JMRKER Posted July 13, 2020 Share Posted July 13, 2020 @ishan_shah The class name should be the same: Either 'checkbox' or 'chexkbox'. @dsonesuk What should be happening here. Neither one changes the display size. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 13, 2020 Share Posted July 13, 2020 (edited) Yes it will! If input type checkbox, or radio. Try changing to 50px. Last checkbox and radio at bottom. https://www.w3schools.com/code/tryit.asp?filename=GGPCN1KL9EM4 Edited July 13, 2020 by dsonesuk Link to comment Share on other sites More sharing options...
JMRKER Posted July 13, 2020 Share Posted July 13, 2020 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 More sharing options...
dsonesuk Posted July 13, 2020 Share Posted July 13, 2020 (edited) 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 July 13, 2020 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now