Enhancing the appearance of standard HTML checkboxes

Question

Enhancing the appearance of standard HTML checkboxes

This HTML snippet displays a pair of checkboxes positioned side by side

<div id="mr_mrs">
    <ul class="mr_mrs form-no-clear">
        <li id="mr" class="popular-category">
            <label for="Mr" id="mr">Mr</label>
            <span><input name="Mr" id="Mr" type="checkbox" /></span>
            <div class="clearboth"></div>
            </li>
        <li id="mrs" class="popular-category">
            <label for="Mrs" id="mrs">Mrs</label>
                <span><input name="Mrs" id="Mrs" type="checkbox" /></span>
            <div class="clearboth"></div>
        </li>
    </ul>
</div>

I am looking to personalize the checkboxes to have a square shape and add some color when they are selected. Please refer to the image linked below for reference:

Is there a way to achieve this customization?https://i.sstatic.net/ZvN6I.png

html css

Answer 1

Answer №1

To place the two controls side by side, you can set their display property to inline-block: display: inline-block. (By default, a div element has a block display.)

In order to allow the user to click on the label text to check the box, there are a couple of options available. Both options are demonstrated in the example provided below.

<label> surrounds both the text and the checkbox.
Alternatively, you can use
```
<label for="myId">some text</label><input id="myId">
```
to link the label to the input field.*

*Please, note that when using the for/id method, it should be label-for and input-id. In the provided example, the same id was assigned to both elements, but ids should be unique on a page.

.checkbox {
  margin: 4px;
  display: inline-block;
}

<div class="checkbox">
  <label>Box 1<input type="checkbox"></label>
</div>
<div class="checkbox">
  <label for="myId">Box 2</label>
  <input id="myId" type="checkbox">
</div>

Answer 2

To place the two controls side by side, you can set their display property to inline-block: display: inline-block. (By default, a div element has a block display.)

In order to allow the user to click on the label text to check the box, there are a couple of options available. Both options are demonstrated in the example provided below.

<label> surrounds both the text and the checkbox.
Alternatively, you can use
```
<label for="myId">some text</label><input id="myId">
```
to link the label to the input field.*

*Please, note that when using the for/id method, it should be label-for and input-id. In the provided example, the same id was assigned to both elements, but ids should be unique on a page.

.checkbox {
  margin: 4px;
  display: inline-block;
}

<div class="checkbox">
  <label>Box 1<input type="checkbox"></label>
</div>
<div class="checkbox">
  <label for="myId">Box 2</label>
  <input id="myId" type="checkbox">
</div>

Enhancing the appearance of standard HTML checkboxes

Answer №1

Similar questions

How to Implement a Dropdown Menu in HTML and CSS for Navigation Bars

When a website is deployed to an application, the process includes MVC bundling and managing relative CSS image paths

What is the best way to showcase a JSON object in an attractive format on a webpage?

a container holding two floating divs

Eliminate the .html extension from the URL and initiate a redirect

Displaying a variety of images in an HTML document can be achieved without the need to manually write out a separate tag

What is the process for generating an Electronic Program Guide for television?

Ensuring that images are the perfect size for their parent container

Transform black and white image to vibrant colors and add various hover effects

What could be the reason that the div is not being centered in the middle of the body?

Displaying pictures under specific conditions

Interacting with a span button within the parent element using its specific id with Selenium and Java

Utilize information stored in a database to automatically navigate to a different webpage

The div remains unchanged when the button is clicked

Add some text onto the Box Component in Material UI

As a useful tool in XML processing, xsl:value-of function effectively filters out any

Triggering unexpected syntax error upon clicking the dropdown menu in the navigation bar

Styling CSS variables uniquely

Add extra space to the dimensions of the div by incorporating padding

How to create a vertically scrollable div within another div by utilizing scrollTop in jQuery