Angular 8 allows for the creation of custom checkboxes with unique content contained within the checkbox itself, enabling multiple selection

I'm in need of a custom checkbox with content inside that allows for multiple selections, similar to the example below:

https://i.sstatic.net/CbNXv.png

<div class="row">
   <div class="form-group">
      <input type="checkbox" id="html">
      <label for="html"></label>
   </div>
   <div class="form-group">
      <input type="checkbox" id="css">
      <label for="css"></label>
   </div>
   <div class="form-group">
      <input type="checkbox" id="javascript">
      <label for="javascript"></label>
   </div>
</div>

CSS

.form-group {
    display: block;
    margin-bottom: 15px;
  }
  
  .form-group input {
    padding: 0;
    height: initial;
    width: initial;
    margin-bottom: 0;
    display: none;
    cursor: pointer;
  }
  
  .form-group label {
    position: relative;
    cursor: pointer;
  }
  
  .form-group label:before {
    content:'';
    -webkit-appearance: none;
    background-color: orange;
    border: 2px solid tranparent;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
    padding: 15px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 5px;
    border-radius: 30px;
  }
  
  .form-group input:checked + label:after {
    content: '';
    display: block;
    position: absolute;
    top: 2px;
    left: 12px;
    width: 6px;
    height: 14px;
    border: solid #0079bf;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

The user has the ability to select and deselect values (selected ones are in dark orange while unselected are light orange). I have tried implementing these checkboxes, but only get an OK sign content. Can anyone suggest how I could achieve this?

Any assistance would be greatly appreciated.

Thanks in advance!

javascriptcssangulartypescriptbootstrap-4

Answer №1

Conceal the checkbox by setting its height, width, and opacity to 0, then utilize CSS to customize the label and text.

.custom-checkbox {
  display: flex;
}

.custom-checkbox input {
  height: 0;
  width: 0;
  opacity: 0;
}

.custom-checkbox .form-group {
  margin: 0 12px;
  /* adjust spacing here between check boxes*/
}

.custom-checkbox .form-group label {
  display: flex;
  box-sizing: border-box;
  height: 32px;
  width: 32px;
  border-radius: 50%;
  background: #fdf6e1;
  color: #7d6540;
  border: 1px solid orange;
  align-items: center;
  justify-content: center;
  font: 14px helvetica, arial, sans-serif;
  cursor: pointer;
  transition: linear 0.2s
}

.custom-checkbox input:checked+label {
  background: orange;
  color: #FFF;
  border: 1px solid #d4830d;
  text-shadow: 0 0 2px #000
}
<div class="row custom-checkbox">
  <div class="form-group">
    <input type="checkbox" name="week" id="html">
    <label for="html">S</label>
  </div>
  <div class="form-group">
    <input type="checkbox" name="week" id="css">
    <label for="css">M</label>
  </div>
  <div class="form-group">
    <input type="checkbox" name="week" id="javascript">
    <label for="javascript">T</label>
  </div>
  <div class="form-group">
    <input type="checkbox" name="week" id="react">
    <label for="react">W</label>
  </div>
  <div class="form-group">
    <input type="checkbox" name="week" id="vue">
    <label for="vue">T</label>
  </div>
  <div class="form-group">
    <input type="checkbox" name="week" id="typescript">
    <label for="typescript">F</label>
  </div>
  <div class="form-group">
    <input type="checkbox" name="week" id="scss">
    <label for="scss">S</label>
  </div>
  <div class="form-group">
    <input type="checkbox" name="week" id="ux">
    <label for="ux">S</label>
  </div>
</div>

Answer №2

Is there a reason for the use of before and after? It might be simpler to just utilize the label directly.

By hiding the checkbox, you can focus on styling the label itself.

A click on the label will toggle the checkbox, prompting a visual change in the label's style.

.form-group input {
  /* Hide the checkbox */
  display: none;
}
.form-group label {
  /* Style the label appropriately */
  background-color: white;
}
.form-group input:checked + label {
  /* Apply selected style */
  background-color: orange;
}
<div class="row">
   <div class="form-group">
      <input type="checkbox" id="html">
      <label for="html">html</label>
   </div>
   <div class="form-group">
      <input type="checkbox" id="css">
      <label for="css">css</label>
   </div>
   <div class="form-group">
      <input type="checkbox" id="javascript">
      <label for="javascript">javascript</label>
   </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can the <article> tag and all its content be positioned in the center of the webpage?

Can the <article> and its content remain centrally aligned on the page? Check out my website here: Typically, when you visit a website, the article is positioned in the center of the page. However, in my case, the article only remains centered when ...

csshtml

Is there a way to simulate the parameters injected into an fs callback without actually interacting with the filesystem during testing?

I'm currently utilizing Chai, Mocha, and Sinon for my testing framework. At the moment, I have a functioning test, but I find myself having to set up a directory and populate it with files just to make my tests run successfully. This approach doesn&a ...

javascriptnode.jsasynchronousstubsinon

What is the best way to establish communication between the browser and an express.js server while utilizing angular ssr?

I've encountered a server-side rendering (SSR) issue that does not seem to be addressed in either the Angular documentation or the new Angular developer documentation. My inquiry pertains to transferring data from the browser to the server, as oppose ...

angularexpressangular-universalangular-ssr

Customizing the appearance of an input button in Internet Explorer 8

I've been trying to style my file input section using a method similar to the one outlined in this article: . However, I'm encountering issues specifically with compatibility in IE8; all I can see is the corner of an oversized button. Here' ...

cssinternet-explorer-8opacity

Creating a CSS layout with three columns where the first column's width is unspecified and the second

I am looking to create a three column layout with specific width requirements. The first column should adjust based on content, the second column should fill the space between the first and third columns, and the third column should have a fixed width. Add ...

htmlcss

Error: Unable to access the 'prototype' property of an undefined object (inherits_browser.js)

After updating our app to a newer version of create-react-app, we started encountering the following error: https://i.sstatic.net/ILdsl.png This error seems to be related to inherits_browser.js, which is likely from an npm module that we are unable to id ...

javascriptreactjswebpack

Difficulties encountered when trying to load a URL or API that contains an array in javascript/p5js

I've run into a coding issue that I'm trying to troubleshoot in p5js. My goal is to retrieve data from a URL/API. The line `kursMin[1]...` gives the correct stock value, but the line `kursMin[i]` returns `[object Object]2021-03-124. close` Bo ...

javascriptarraysjsonapi

Target only the <a> elements within a specific <div> using JavaScript

How can I target the first occurrence of the letter 'a' in this code using JavaScript? (href=some.php) <div class="accordionButton"><div id="acr_btn_title"><a href="some.php"><p>stuff</p></a></div><di ...

javascriptjquery

Recursive React components. String iteration enhancement

In my React app, I am trying to create a string hierarchy from an object. The object structure is like this: { name: 'name1', parent:{ name: 'name2', parent:{ name: 'name3', parent: null }}} My plan is to use a state variable ...

javascriptreactjsrecursion

Craft a backdrop with subtle hints of italics

I am looking to create a unique background for my webpage using HTML and CSS. I want to have repeated italic shades in various shades of blue, red, and white, similar to rectangular shapes. For inspiration, take a look at the design on this website: If n ...

htmlcssphotoshoprectangles

Calculate the total value of a certain field within an array when a specific condition is satisfied

I have two sets of data. I am looking to calculate the total time_spent for each course_id that appears in both set 1 and set 2. let set1 = [ { instructor_id: 7, course_id: 19, lesson_id: 1, time_spent: 0 }, { instructor_id: 7, course_id: 19, lesson_ ...

javascriptarrays

Placing buttons on top of a video within a div container

I am facing a challenge with implementing custom controls on a video embedded in my webpage. I have tried setting a div to absolute position for the buttons, but they are not clickable. Is there a way to achieve this without using jQuery? I need the butto ...

javascripthtmlcssbuttonvideo

What is the process for node_modules packages to access configuration files located in the project root directory?

I am currently developing an npm package that requires the ability to access configuration files from the project's root directory. I'm uncertain of the proper method for accomplishing this. For instance, Next.js has the capability to read ./p ...

javascriptnode.jsnpmnode-modules

Guide on specifying a type for a default export in a Node.js module

export const exampleFunc: Function = (): boolean => true; In the code snippet above, exampleFunc is of type Function. If I wish to define a default export as shown below, how can I specify it as a Function? export default (): boolean => true; ...

typescript

Is it possible to test an Angular application using Protractor within an iframe that is hosted by a non-Angular

While trying to migrate a legacy app to Angular, we encountered an issue where the legacy app loads the new app in an iframe. Testing this integration with Protractor has proven challenging due to the fact that the legacy app is not built on Angular. If t ...

javascriptangularjsiframeprotractor

Creating functionality in Ionic to allow for the dynamic addition of buttons to the navigation bar

I have a navigation bar and I would like to include a save button on it for just one screen. After going through various blogs, I found that the general advice is to declare buttons in the view rather than accessing them in a controller. But still, isn&apo ...

javascriptangularjsionic-framework

What is the best way to create a TypeScript function similar to a 'map' in React?

I recently started learning TS and am having trouble typing this arrow function: const mapLikeGet = (obj, key) => { if (Object.prototype.hasOwnProperty.call(obj, key)) return obj[key] } ...

javascriptreactjstypescript

It appears that the JS function is not being triggered

I am facing an issue with my JavaScript code where a ball is not showing up even though it should. I have an array with only one element, and when that element matches with "F2", the ball is supposed to appear. I suspect there might be a problem with my us ...

javascriptjqueryhtmlcss

including a close button when in use and excluding it when not in use

Seeking assistance with removing the "close" icon if it is not active. Here is the code I currently have $("#mason2 li div").click(function() { $(this).parent().hide().appendTo("#mason2").fadeIn(200); $(this).append('<p class="close"& ...

javascriptjquery

Is there a way to create automatic line breaks in this text?

Is there a way to automatically ensure the span spans multiple lines? I am working with HTML and CSS. Below is a modified version of my code, as some parts are in PHP: <div style='border: 1px solid; padding: 10px; margin-top: 5px;'> < ...

htmlcssscaledevicedisplay