How to changed height width radio button

How do I increase height width of radio buttons?

This post help to learn increase height width of radio button. we are using css property width and height to change the radio button width and height.

Code for change height width radio button:

<!DOCTYPE html>
<html>
<head>
<style>
input{
accent-color:red;
height:30px;
width:30px; 
}
</style>
</head>
<body>
<h1>Display Radio Buttons</h1>
<form action="/action_page.php">
  <p>Please select your favorite Fruit:</p>
  <input type="radio"  name="fav_fruit" value="Mango">
  <label for="mango">Mango</label><br>
  <input type="radio" name="fav_fruit" value="Apple">
  <label for="apple">Apple</label><br>
  <input type="radio" name="fav_fruit" value="Orange">
  <label for="orange">Orange</label>
</form>
</body>
</html>

Output:

Radio button height width increase

FAQ

Qusetion1: How do I reduce the size of my radio button?
Answer: The different RadioButton sizes available are default and small. To reduce the size of the default RadioButton to small, set the cssClass property to e-small.

Qusetion2: Which property helps you to add an image on the radio button control?
Answer: The Checked property of the radio button is used to set the state of a radio button.

Qusetion3: How to set height and width of button in CSS?
Answer: To set the button width, use the CSS width property.

Qusetion4: How to add icon to radio button in HTML?
Answer: The alt property allows an image link to show a text label.

Qusetion5: Which attribute is used to place an image?
Answer: The src attribute is required, and contains the path to the image you want to embed.
Previous
Next Post »

Please do not entering spam link in the comment box ConversionConversion EmoticonEmoticon