Switch out the checkbox for a span for a different approach

Question

Switch out the checkbox for a span for a different approach

Working with Angular 9 reactive forms, I am currently using the following form setup:

 
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <label for="active">Active</label>
      <input id="active" type="checkbox" formControlName="active"> 
      <button class="action" type="submit">Send</button>
    </form>

However, rather than a traditional checkbox, I want to implement a clickable rectangle that functions like a checkbox:

.active { padding: 20px; display: inline-block; }
.checked { border: 1px solid green; color: green; }

<span class="active checked">Active</span>

What steps do I need to take to achieve this?

html css angular angular9

Answer 1

Answer №1

Styling Checkboxes with CSS
input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

label {
  border: 1px solid transparent;
  display: inline-block;
  padding: 20px;
  cursor: pointer;
}

input:checked+label {
  border-color: green;
  color: green;
}

<div>
  <input id="my-input" type="checkbox">
  <label for="my-input">Active</label>
</div>

Answer 2

Styling Checkboxes with CSS
input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

label {
  border: 1px solid transparent;
  display: inline-block;
  padding: 20px;
  cursor: pointer;
}

input:checked+label {
  border-color: green;
  color: green;
}

<div>
  <input id="my-input" type="checkbox">
  <label for="my-input">Active</label>
</div>

Answer 3

Answer №2

Is this what you were looking for?

.control-me::after {
    content: "😃";
    font-size: 100px;
}
#toggle:checked ~ .control-me::after {
    content: "😩";
}

label {
    background: #A5D6A7;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
}

.visually-hidden {
    position: absolute;
    left: -100vw;
    
    /* You could also overlay the checkbox on top of the label and set opacity to zero, which might be better for some touch devices */
}

body {
    height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    text-align: center;
    font: 900 24px/1.4 -system-ui, sans-serif;
}

<div>
    <label for="toggle">Toggle</label>
    
    <input type="checkbox" id="toggle" class="visually-hidden">

    <div class="control-me"></div>
</div>

Feel free to use or modify this code, maybe make the "Active" button turn green. If you need any assistance with your code, feel free to reach out to me via email at: [email protected]

Answer 4

Is this what you were looking for?

.control-me::after {
    content: "😃";
    font-size: 100px;
}
#toggle:checked ~ .control-me::after {
    content: "😩";
}

label {
    background: #A5D6A7;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
}

.visually-hidden {
    position: absolute;
    left: -100vw;
    
    /* You could also overlay the checkbox on top of the label and set opacity to zero, which might be better for some touch devices */
}

body {
    height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    text-align: center;
    font: 900 24px/1.4 -system-ui, sans-serif;
}

<div>
    <label for="toggle">Toggle</label>
    
    <input type="checkbox" id="toggle" class="visually-hidden">

    <div class="control-me"></div>
</div>

Feel free to use or modify this code, maybe make the "Active" button turn green. If you need any assistance with your code, feel free to reach out to me via email at: [email protected]

Switch out the checkbox for a span for a different approach

Answer №1

Answer №2

Similar questions

Achieving uniform row height in CSS Grid Layout

Fill in the text field according to the option selected from the dropdown menu

When using Firefox, the -moz-transform:scale property allows you to scale the image without impacting its original dimensions

Avoid using CSS browser prefixes when selecting plugins or addons

Modify the `<link>` tag using the `onclick` function in JavaScript

Embedding a CSS file into a PHP class

Guide to setting up the primary navigation in the WordPress administration panel

Encountering a CORS error after deploying an Angular and Spring Boot application on Heroku

What could be causing the hover effect to not work on the cards in my Svelte component? (HTML+CSS)

Best Practices for Architecture and Routing in Angular 8 (suggestions)

What could be causing the absence of the margin in my code?

The default behavior of Angular-Keycloak does not include automatically attaching the bearer token to my http requests

Issue with modal box not displaying properly when hidden div is within a for loop

What is the best way to create a navigation link in PHP along with forms?

Maintaining the order of elements in Angular's insertion process

Achieving the perfect button using a combination of material-ui and styled-components

Is requesting transclusion in an Angular directive necessary?

Guidelines for toggling text visibility based on a randomly generated number with if statements in vanilla JavaScript

A CSS rule to display a nested list on the left-hand side

Angular and Jest combo has encountered an issue resolving all parameters for the AppComponent. What could be causing this error?