Align checkboxes horizontally to resemble a progress bar styling

Currently, I have a series of checkboxes that are displayed sequentially on the page.

<div class="myCheck">
    <h5>Here's what you've selected so far</h5>
    <label class="mdl-checkbox mdl-js-checkbox  mdl-js-ripple-effect" >
        <input type="checkbox" [(ngModel)]="hasHall" class="mdl-checkbox__input" disabled />
        <span class="mdl-checkbox__label">Marriage Hall</span> 
    </label>

    <label class="mdl-checkbox mdl-js-checkbox  mdl-js-ripple-effect" >
        <input type="checkbox" [(ngModel)]="hasCaterer" class="mdl-checkbox__input" disabled />
        <span class="mdl-checkbox__label">Caterer</span>
    </label>
    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" >
        <input type="checkbox"  class="mdl-checkbox__input" disabled/>
        <span class="mdl-checkbox__label">Decorator</span>
    </label>
</div>

I am looking to style them in a horizontal progress bar layout similar to this image: https://i.stack.imgur.com/Uz7pD.png

If possible, could someone offer guidance on how to achieve this using CSS? I don't have much experience with styling and would appreciate any help. How can I customize the appearance of checkboxes as shown in the provided illustration?

cssmaterial-design

Answer №1

.mdl-checkbox {
  display: inline-block;
  width: 100px;
  text-align: center;
  padding: 10px;
  position: relative;
  float: left;
}

.mdl-checkbox:after,
.mdl-checkbox:before {
  height: 1px;
  background-color: grey;
  content: "";
  top: 16px;
  position: absolute;
  right:0;
  left:0;
}

.mdl-checkbox:before {
  right: calc(50% + 6px);
}

.mdl-checkbox:after {
  left: calc(50% + 6px);
}

.mdl-checkbox:first-of-type:before {
  display: none;
}

.mdl-checkbox:last-of-type:after {
  display: none;
}

input {
  width:14px;
  height:14px;
  border-width:1px;
  display: block;
  margin: auto;
  position: relative;
}
<div class="myCheck">
    <h5>You have selected the following items</h5>
    <label class="mdl-checkbox mdl-js-checkbox  mdl-js-ripple-effect" >
        <input type="checkbox" [(ngModel)]="hasHall" class="mdl-checkbox__input" disabled />
        <span class="mdl-checkbox__label">Marriage Hall</span> 
    </label>

    <label class="mdl-checkbox mdl-js-checkbox  mdl-js-ripple-effect" >
        <input type="checkbox" [(ngModel)]="hasCaterer" class="mdl-checkbox__input" disabled />
        <span class="mdl-checkbox__label">Caterer</span>
    </label>
    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" >
        <input type="checkbox"  class="mdl-checkbox__input" disabled/>
        <span class="mdl-checkbox__label">Decorator</span>
    </label>
</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

Setting the font size for the entire body of a webpage globally is ineffective

Technology Stack: Nuxt.js + Vuetify.js Problem: Unable to set global body font size Solution Attempt: I tried to adjust the body font size to 40px in ~/assets/style/app.styl: // Import Vuetify styling ...

javascriptcssvue.jsvuetify.jsnuxt.js

Positioning children in CSS Flexbox: one at the top and the

Is there a way to position the a element at the top and the button at the bottom, using only flex properties without absolute or fixed positioning? Currently, the button is at the bottom but the title is not at the top: .all { display: flex; hei ...

htmlcssflexbox

CSS animations are not running as expected

Currently, I've been experimenting with a basic CSS animation. The objective is to make the application logo move 200px to the right and then smoothly return to its original position. Below is the code snippet I've used for these animations: /* ...

htmlcssreactjsanimationcss-animations

Why is my CSS Grid still not working correctly even though validation services have confirmed it is 100% correct?

After running my HTML and CSS through the validation services, everything seemed to check out fine. However, when I try to implement the grid layout using the CSS below, it doesn't seem to work as expected: body { display: grid; grid-template ...

htmlcsscss-grid

Is it possible to use CSS transitions to animate an absolute positioned element?

I am having trouble getting a CSS transition to work for animating an element's position change. I have tried using the all properties in the transition declaration like in this example: http://jsfiddle.net/yFy5n/3/ However, my goal is to only apply ...

csscss-transitions

The clear function in the template slot of Vue multiselect is not functioning properly

I decided to incorporate the asynchronous select feature found in the documentation for my project. This feature allows me to easily remove a selected value by clicking on 'X'. Below is a snippet of the general component that I use across variou ...

javascriptcssvue.jsvue-multiselect

Updating the HTML class with JavaScript

My HTML class has two classes $(document).ready(function() { $(".container").hover(function() { $('.green').addClass('display-on'); }); $(".container").mouseleave(function() { $('.black&apos ...

javascriptjqueryhtmlcss

What is the correct way to accurately determine the width of a block being displayed with the flex-direction:column property?

For instance: HTML console.log($('.container').width()); // 600px as we defined in css. console.log($('.list').width()); // 600px console.log($('.box').eq('-1').position().left + $('.box').outerWidth( ...

javascriptcssflexbox

Can text be formatted differently based on its length and whether it wraps onto multiple lines?

Looking to display book titles on a webpage with varying lengths. Some are short enough to fit in one line, while others are longer and wrap onto two lines. Is it possible to apply different styles (such as color or line-height) for these two cases using ...

css

seeking a solution to simulate a variety of web browsers

Seeking a solution to preview my website on various browsers including IE7 and above, as well as different versions of Firefox. Although I am new to CSS, I previously tried installing software on my PC to assist with this task, which unfortunately caused ...

htmlcssinternet-explorer

Discover the unique value in Angular if it is not present in the list

I have a question about handling values in a list and displaying the "create value" component to the user when needed. How can I efficiently compare search input values with those in the list and determine if a match exists? If no match is found, the "cr ...

javascripthtmlcssangulartypescript

Fullscreen images stop from getting stretched

I am facing an issue with making images full-screen without them stretching on larger screen sizes. Is there a technique to keep the image size consistent regardless of the screen dimensions? I am aware of how background images can be made fullscreen usi ...

htmlcss

UI binder is having difficulty resolving CSS

After creating a search panel for my application using UI binder, I noticed that the desired behavior is not being achieved. Ui.xml <g:HTMLPanel> <c:SimpleContainer> <c:InfoContainerHeader text="{labels.searchFilter}" /> ...

javahtmlcssgwt

How to harness the power of loops in JavaScript

Having trouble getting this code to repeat a CSS transition properly. for (var i=0 ; i<4 ; i++){ setTimeout(function() { $('#top-left').css('margin', '45px 0 0 45px'); $('#top-mid' ...

javascriptjquerycsscss-transitions

CSS not being applied to Next.js HTML pages

Currently, I am utilizing Nextjs and including the flaticon css in _app.js as follows: import '../public/assets/css/flaticon.css'; In the upcoming section, an error is being encountered: @font-face { font-family: 'Flaticon'; src: ...

cssnext.js

Unusual SASS results observed while utilizing extends functionality

Having issues with my SASS files: _android.scss: $width: 111px; @import 'child'; .android .child { @extend %child; } _ios.scss: $width: 999px; @import 'child'; .ios .child { @extend %child; } _child.scss: %child { wi ...

csssass

Interactive Video Effect

Seeking to create a unique video hover effect on an image where, when the mouse hovers over it, a video pops up similar to examples found on this website. I have been grappling with finding a solution for this issue over the past few months. Does anyone ...

jqueryhtmlcss

access various paths to distinct iframes

<?php // Specify the directory path, can be either absolute or relative $dirPath = "C:/xampp/htdocs/statistics/pdf/"; // Open the specified directory and check if it's opened successfully if ($handle = opendir($dirPath)) { // Keep readin ...

javascriptphphtmlcssiframe

Adjust the state based on the event in ReactJs

I have the following code snippet in a React JS application: const items = [ { value: "A", label: "A" }, { value: "B", label: "B" }, { value: "C", label: "C" }, { value: "D", label: "D" }, { value: " ...

cssreactjs

Div that scrolls independently without affecting the position of other elements

Visit this link for reference <div class="col-10 content" id="content"> <ul> <li>News</li> <li>News</li> <li>News</li> <li>News</li> < ...

htmlcssscroll