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

Converting Umbraco Json to a CSS class named "[]"

I'm currently using Umbraco with the data-type grid layout and I am trying to add custom settings (CSS classes) to each row/cell. The results are somewhat working, but I want to improve it. Here's the user interface: https://i.stack.imgur.com/iY ...

htmlcssjsonumbracoumbraco7

Utilizing a dynamic URL to set the background image of a div element (with the help of

Currently, I am in the process of designing a user registration page that allows users to input an image URL and view a preview of the image within a designated div. The div already contains a default image set by a specific class. The HTML code for displa ...

jqueryhtmlcssimage

Adjust the checkmark color of MUI Checkbox

When using Material UI's MUI library for React, I encountered an issue with the checkbox checkmark color. By default, the checkmark takes on the background color of the container element, which is great for light backgrounds but not ideal for dark one ...

cssreactjscheckboxmaterial-ui

Preventing Content Jumping When Concealing Elements: Tips and Tricks

I've been working on a project at , where you can click on a small map to expand a larger map below it. However, I noticed that when you scroll down to the large map and then try to close it using the button at the bottom, the content on the page jum ...

javascriptjqueryhtmlcssangularjs

Video is not visible in safari browser initially, but becomes visible only after scrolling for a little while

Having issues with a video not displaying correctly in Safari? The problem is that the video only becomes visible after scrolling the browser window. Want to see an example of this issue in action? Click here and select the red bag. Check out the code sni ...

javascriptjquerycss

Troubleshooting: CSS Animation Not Showing up on Screen

When I was attempting to create a JavaScript game in HTML, I encountered a problem. Despite ensuring that the syntax was correct and conducting some research online, the animation refused to display. No matter how many times I tried, it just would not work ...

csscss-animationskeyframe

Image carousel with interactive buttons

I've taken over management of my company's website, which was initially created by someone else at a cost of $24,000. We recently made some edits to the slideshow feature on the site, adding buttons that allow users to navigate to corresponding p ...

javascriptjqueryhtmlcssinternet-explorer

Trouble with CSS in a WordPress theme utilizing a two-column layout

After setting up my wordpress blog (http://raptor.hk), I encountered an issue with aligning the right sidebar correctly. It seems like I have overlooked something in the CSS code. The div responsible for the sidebar has been assigned the name "rightbar". I ...

csswordpress-theming

css content exceeds div boundaries

Hello, I am experiencing an issue with my webpage located at . When I zoom out, the content overflows from its containing div. Setting the height to auto or 100% works fine, but the left column ends up being smaller than the right one, and using clear do ...

css

Responsive Alignment of Slanted Edges using CSS

I have been working on creating a responsive diagonal layout with slanted shapes (refer to the image attached). However, I'm facing a challenge with aligning the edges smoothly at different screen sizes, especially when the rows grow and the screen re ...

javascripthtmlcssresponsivediagonal

What advantages and disadvantages come with choosing between using vh and vw for responsive text?

My main inquiry is centered around the various techniques for creating responsive text. Is there a particular method that stands out as the best option for general use, or do different methods serve distinct purposes? ...

htmlcsstextflexbox

What are some effective ways to analyze jQuery and JavaScript using web development tools?

I'm struggling to use web development tools to inspect the JavaScript on websites. It's challenging to identify which parts of a site are utilizing JS, unlike CSS or HTML where it's more visibly defined. Even when I attempt to delete some J ...

javascriptjqueryhtmlcssweb-developer-toolbar

How can I make two flexbox items in a row stack on top of each other as a column?

I'm currently working on a layout that involves a parent flexbox containing multiple sections. My challenge lies in getting two specific sections to stack vertically while the rest of the layout remains horizontal. At the moment, I have two sections ...

csslayoutflexboxalignment

Is there a way to track the amount a user scrolls once they have reached the bottom of a page using Javascript?

It's a popular UI pattern on mobile devices to have a draggable element containing a scrollable element. Once the user reaches the end of the scrollable content, further scrolling should transition into dragging the outer element. For example, in this ...

javascriptcss

Troubleshooting: Issue encountered while adding jQuery Slideshow plugin to current website

I am currently facing some challenges with a specific feature on my website. I am trying to integrate Jon Raasch's "Simple jQuery Slideshow Plugin" into an existing site that was not originally built by me. However, when viewing the site in IE 9, two ...

jquerycssbrowserinternet-explorer-9compatibility

Is it necessary to wait for CSS to fully load on a static site built with Next.js?

I am currently working on a Next.js static site. The JavaScript loads quickly, but there seems to be a delay in applying the styled-components CSS as seen in the screenshot. The CSS only kicks in after the page has fully loaded. Does anyone have any sugge ...

cssnext.jsstyled-components

Change the size of a particular div upon hovering over another element

I'm trying to figure out how to scale my div with text when a user hovers over a button, but I've tried various operators like >, ~, +, - with no success. section { background: #000; color:#fff; height: 1000px; padding: 150px 0; font-family: R ...

javascriptjqueryhtmlcss

Utilizing CSS/HTML to optimize code for mobile applications

Looking for some help with implementing the Upcoming Events part from this code snippet: https://codepen.io/AbhijithHebbarK/pen/boKWKE .events-details-list{ opacity:0; transition: all 0.3s ease-in-out; position: absolute; left: 0; rig ...

htmlcssmobile

Utilizing Wordpress post images to dynamically change background URLs in CSS

Is there a way to dynamically set a background image in CSS using PHP, specifically the Wordpress post image? background: <?php if(has_post_thumbnail()){ $img = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'dest ...

csswordpresswordpress-themingthumbnailscustom-wordpress-pages

What causes getBoundingClientRect() in Javascript to occasionally produce decimal values?

Currently, I am experimenting with an HTML5 canvas element. A major concern of mine is setting up a mousemove event to monitor the movement of the mouse over the canvas for drawing and other purposes. Unfortunately, I have not been able to locate a definit ...

javascriptcsshtmlcanvas