Role21 1 Report post Posted December 9, 2018 How can I modify the font size of Radio Button options? I cannot see them under Styles Quote Share this post Link to post Share on other sites
JolliBeng 27 Report post Posted December 9, 2018 Hi Role21, You may add this CSS code on your DataPage Header: <style> input[type="radio"] + label { font-size: 16px !important; } </style> just change the font size to your desired size. -JolliBeng Quote Share this post Link to post Share on other sites
jnordstrand 2 Report post Posted March 12 Hi JolliBeng, Is there a way to increase the actual Radio Button Size as well? I was able to increase the label size with your help. Thank you, Jeff Quote Share this post Link to post Share on other sites
kpcollier 24 Report post Posted March 12 19 minutes ago, jnordstrand said: Hi JolliBeng, Is there a way to increase the actual Radio Button Size as well? I was able to increase the label size with your help. Thank you, Jeff Hey @jnordstrand, try this and let me know if it works. input[type=radio]{ transform: scale(1.5); } Quote Share this post Link to post Share on other sites
jnordstrand 2 Report post Posted March 14 Hey there. It worked to some extent. Once the actual radio buttons were enlarged they squeezed out the labels. I would like to stretch out the area to allow for larger buttons and labels. Thank you, Quote Share this post Link to post Share on other sites
TsiBiRu 16 Report post Posted March 14 Hi @jnordstrand, To better assist you with this, kindly provide us with the deployed URL of your DataPage so that we can try to formulate/create some CSS styles override to fix this using the Dev Tools in the browser. You can just remove the deployed URL of your DataPage in this post after this has been sorted out. Regards, TsiBiRu Quote Share this post Link to post Share on other sites
jnordstrand 2 Report post Posted March 19 Please take a look. I would like to have large buttons and labels so that someone can easily enter from a tablet with their fingers. https://c0bkr285.caspio.com/dp/b1b33000a0cb2bbe80f14625b947 Thank you, Quote Share this post Link to post Share on other sites
jnordstrand 2 Report post Posted March 19 Hi guys, I did some research and taught myself some things. <style> input[type="radio"] { margin-right: 30px; } input[type="radio"] { margin-left: 30px; } input[type="radio"] + label { font-size: 32px !important; } input[type=radio]{ transform: scale(4); } </style> This works and gave me Big buttons with spacing in between. Quote Share this post Link to post Share on other sites
Role21 1 Report post Posted March 20 I have another question. I put a line break on my radio button. So my radio button looks like this: My question is, how do I align the label? So, it should look like the following: Option 123456789 TIA. Quote Share this post Link to post Share on other sites
TsiBiRu 16 Report post Posted March 20 Hi @ Role21 I think you can just put two non-breaking line ( ) after your line break (<br>) Here is a screenshot of the DataPage Here is a screenshot of the preview mode. If you want to further move the number (123....) to the left, just add one more non-breaking line ( ) I hope this helps. Regards, TsiBiRu Quote Share this post Link to post Share on other sites
Role21 1 Report post Posted March 20 Hi @TsiBiRu I actually tried that already. As you may see, it still does not align properly. Look at the "O" in Option and "1". I want that to be aligned. Quote Share this post Link to post Share on other sites