Ensure that the CSS data-step attribute is replaced with the use of a span element

Hi there, I'm currently working with a step bar template that you can find at the following link: http://codepen.io/mattdrose/pen/qEZBge

My issue arises when dealing with the complete step, which is represented by the following code:

<li class="is-complete lx-text-table" data-step="✔">

I would like to customize the icon in the data-step attribute to something like this: 

<span class="icon"></span>

Here is the CSS for the complete step section:

.progress_bar > li.is-complete:before, .progress_bar > li.is-complete:after {
  
  color: #FFF;
  background: #9bca61;
}

If anyone has any ideas on how I can achieve this customization, I would greatly appreciate it. Thank you in advance.

htmlcss

Answer №1

Unclear about your request... Are you asking how to insert a checkmark "✓" in the circles? Check out my example below where I changed the content value from attr(data-end) to '\2713', which represents "✓":

.progress > li:before {
      content: '\2713';

.progress {
  list-style: none;
  margin: 0;
  padding: 0;
  display: table;
  table-layout: fixed;
  width: 100%;
  color: #849397;
}
.progress > li {
  position: relative;
  display: table-cell;
  text-align: center;
  font-size: 0.8em;
}
.progress > li:before {
  /*content: attr(data-step);*/
  content: '\2713';
  display: block;
  margin: 0 auto;
  background: #DFE3E4;
  width: 3em;
  height: 3em;
  text-align: center;
  margin-bottom: 0.25em;
  line-height: 3em;
  border-radius: 100%;
  position: relative;
  z-index: 1000;
}
.progress > li:after {
  content: '';
  position: absolute;
  display: block;
  background: #DFE3E4;
  width: 100%;
  height: 0.5em;
  top: 1.25em;
  left: 50%;
  margin-left: 1.5em\9;
  z-index: -1;
}
.progress > li:last-child:after {
  display: none;
}
.progress > li.is-complete {
  color: #2ECC71;
}
.progress > li.is-complete:before,
.progress > li.is-complete:after {
  color: #FFF;
  background: #2ECC71;
}
.progress > li.is-active {
  color: #3498DB;
}
.progress > li.is-active:before {
  color: #FFF;
  background: #3498DB;
}
/**
 * Needed for IE8
 */

.progress__last:after {
  display: none !important;
}
/**
 * Size Extensions
 */

.progress--medium {
  font-size: 1.5em;
}
.progress--large {
  font-size: 2em;
}
/**
 * Some Generic Stylings
 */

*,
*:after,
*:before {
  box-sizing: border-box;
}
h1 {
  margin-bottom: 1.5em;
}
.progress {
  margin-bottom: 3em;
}
a {
  color: #3498DB;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
body {
  text-align: center;
  color: #444;
}
<h1>Scalable Responsive Progress Bar</h1>

<ol class="progress">
  <li class="is-active" data-step="1">
    Step 1
  </li>
  <li data-step="2">
    Step 2
  </li>
  <li data-step="3" class="progress__last">
    Step 3
  </li>
</ol>

<ol class="progress progress--medium">
  <li class="is-complete" data-step="1">
    Step 1
  </li>
  <li class="is-active" data-step="2">
    Step 2
  </li>
  <li data-step="3" class="progress__last">
    Step 3
  </li>
</ol>

<ol class="progress progress--large">
  <li class="is-complete" data-step="1">
    Create Account
  </li>
  <li class="is-complete" data-step="2">
    Login
  </li>
  <li class="is-active" data-step="3">
    Payment
  </li>
  <li data-step="4" class="progress__last">
    Confirm
  </li>
</ol>

<h5><a href="http://www.browserstack.com/screenshots/18de86e5aee5c2bac662805e03ea5ed1dbd7d7fd" target="_blank">Supported by IE8+</a></h5>

If not all circles need to have "✓", I can demonstrate how to add it selectively.

UPDATE: Upon revisiting the question, it appears you want individual circles marked. If that's the case, revert the CSS back to its original form and implement the following instead:

<li class="is-complete lx-text-table" data-step="&#10003">

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

When the user clicks, reveal the form with a seamless transition

Check out my jsfiddle here: http://jsfiddle.net/tz52u/9/ I'm curious about how to create a smooth transition for the 'on click' event, so that it gradually appears on the page instead of appearing instantly? Any assistance would be greatl ...

javascriptjqueryhtmlcss

The motion defined in the CSS keyframes is failing to animate as expected

http://plnkr.co/edit/46U9HFEJ3bWoYnvmeulY?p=preview I am trying to create a keyframes animation in the plnkr above that will make links move from left to right with an opacity change on load. However, I am facing an issue where only the opacity change is ...

htmlcsscss-animations

Unable to implement a transition to adjust the scaling transformation

As I work on developing a website for a local business, my progress involves creating a menu bar. However, I am facing an issue with the transition I have applied using transform: scale(1.2) which does not seem to be working as intended. After spending h ...

htmlcss

What is the best way to position a button directly to the right of a text box with no space in

Is there a way to perfectly align a submit button to the right of a text or search box, matching the height of the search box, and eliminating any unwanted white space between them? This is my current setup: <input type="text" value="" placehold ...

htmlcsslayout

Numerous JQuery AJAX form submissions leading to individual outcomes

I have implemented a script on my page that handles form submissions for multiple forms by calling a specific action. Here is the script: $(function () { $('form').submit(function () { if ($(this).valid()) { $.ajax({ ...

javascriptjqueryhtmlajax

Tips for adjusting the horizontal position of a grid item within a map() loop

I am trying to align the text in my Timeline component from Material Ui always towards the center of the timeline. The TimelineContent contains Paper, Typography (for title and description), and an image. Currently, I have multiple TimelineContent element ...

javascriptcssreactjsmaterial-ui

When viewing in full screen, the page cuts off abruptly in the middle

Having trouble creating a login page for my capstone project as the form I designed isn't filling up the fullscreen. I created a login form with Bootstrap columns but it only takes up half of the screen, leaving the other half white. body { ...

htmlcssbootstrap-5

Establishing a connection between an Express server and a MariaDB database

Currently, I am working on creating a simple login webpage without any security measures. The setup includes an OpenSuse server with a mariadb database, an Express server, and an HTML file for the client. Express Server: const mariadb = require('mari ...

htmlnode.jsexpresspostmariadb

Ensuring that the header contains a centered element and a right-justified element, both aligned perfectly vertically

I'm currently working on creating a unique header design for my website, where I want one element to be centered and another element to be right-justified within the header. After brainstorming different approaches, I came up with the following metho ...

htmlcssweb

Incorporate JavaScript functionality with HTML dropdown lists

I am attempting to achieve the following: The user can choose between "Option One" or "Option Two". If they select "Option One", the result will be 66 + 45, and if they select "Option Two", the result will be 35 + 45. How can I make this work using a com ...

javascripthtml

Learn how to toggle between two different image sources with a single click event in JavaScript

If the button is clicked, I want to change the image source to one thing. If it's clicked again, it should change back to what it was before. It's almost like a toggle effect controlled by the button. I've attempted some code that didn&apos ...

javascripthtmlimagefunctionsrc

Django: Is there a way to modify the PayPal script for pay upon arrival?

I currently do not wish to accept online payments on my e-commerce site. Instead, I would like the courier to handle package delivery and collection of fees. How can I modify the PayPal script to bypass validations and only register payments upon arrival? ...

javascriptpythonhtmldjango

How to customize a dropdown menu with the size property?

Can anyone help me with styling a select box that uses the size attribute? Most tutorials only cover single-item select boxes. Has anyone dealt with styling select boxes with the size attribute before? Here's an example of what I'm trying to acc ...

javascriptjqueryhtmlcss

I don't understand why my BeautifulSoup code is throwing an attribute error even though the variable it's referring to is assigned a value

Currently, I am working with Python 3.9.1 along with selenium and BeautifulSoup to develop my first web scraper targeting Tesco's website. This is essentially a mini project that serves the purpose of helping me learn. However, upon running the code p ...

pythonhtmlseleniumbeautifulsoupattributeerror

Leverage HTML within JSON for a multilingual website using i18next with Next.js

I am working on a multi-language website using Next.js. To handle the translations, I am using the package i18next. In my JSX code, I define variables like this: {t("satisfied:title")} This means {t("JSONfileName:JSONvariable")} However, when I try to i ...

htmlreactjsjsonnext.js

Create a div that can grow in size without the need to set a specific height for it

Here is an example of my HTML code: <div id="wrapper" class='common'> <div id="left" class='common'>Menu I Menu II Menu III Menu IV</div> <div id="right" class='common'>hello world..hello world ...

htmlcss

Issue with IE11: Flexbox with absolute positioning not sizing correctly, fills entire width instead of individual content

Here's a simple case to reproduce the issue: <div style="display: inline-block; position: relative; border: 1px solid black;"> short <div style="display: flex; position: absolute; border: 1px solid black; top: 100%; lef ...

htmlcssflexboxinternet-explorer-11

Consistent word spacing across several lines

Can someone help me with an issue I'm facing? It seems simple, but I can't seem to figure it out. I am looking for a way to maintain consistent spacing between words on multiple lines without using tables. Essentially, I want something like invi ...

htmlcss

Tips for toggling password visibility by clicking outside a password field

As I work on creating a password field that allows users to toggle the visibility of their password by clicking an eye icon, I am facing a challenge. I want the password to be hidden automatically when the user clicks outside the field, which requires a co ...

javascripthtmljquery

AutoComplete issues a warning in red when the value assigned to the useState hook it is associated with is altered

const [selectedCountry, setSelectedCountry] = useState(); <Autocomplete autoHighlight={true} //required autoSelect={true} id="geo-select-country" options={availableCountries} value={se ...

javascripthtmlreactjsautocompletematerial-ui