Embedding content within a toggle slider

Question

Embedding content within a toggle slider

As a beginner in CSS, I have a simple question that needs addressing. I am unsure which class to begin with for my task.

The goal is to insert text (specifically, two digits) neatly inside toggle buttons (the slider that moves and appears white).
I am using a sample toggle code:

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

<h2>Toggle Switch</h2>

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <span class="slider"></span>
</label><br><br>

<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <span class="slider round"></span>
</label>

In my HTML attempts, I have used

<span class="slider round">99</span>

and added color:black to .slider:before, but these changes did not work. What can I do to consistently display the number 99 inside the white, rounded slider of the toggle?

html css

Answer 1

Answer №1

Make your number more interactive by adding an additional wrapping element within the <span class="slider">. This will give you greater flexibility to customize its appearance and functionality.

   <label class="switch">
      <input type="checkbox" checked>
      <span class="slider round">
         <span class="number">99<span>
      </span>
    </label>

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before,
.slider .number {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider .number {
  background: none;
  font-size: 14px;
  left: 9px;
  top: 9px;
}

input:checked+.slider {
  background-color: #2196F3;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before,
input:checked+.slider .number {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

<h2>Toggle Switch</h2>

<label class="switch">
  <input type="checkbox">
  <span class="slider">
     <span class="number">99</span>
  </span>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <span class="slider">
     <span class="number">99</span>
  </span>
</label><br><br>

<label class="switch">
  <input type="checkbox">
  <span class="slider round">
     <span class="number">99</span>
  </span>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <span class="slider round">
     <span class="number">99</span>
  </span>
</label>

Answer 2

Make your number more interactive by adding an additional wrapping element within the <span class="slider">. This will give you greater flexibility to customize its appearance and functionality.

   <label class="switch">
      <input type="checkbox" checked>
      <span class="slider round">
         <span class="number">99<span>
      </span>
    </label>

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before,
.slider .number {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider .number {
  background: none;
  font-size: 14px;
  left: 9px;
  top: 9px;
}

input:checked+.slider {
  background-color: #2196F3;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before,
input:checked+.slider .number {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

<h2>Toggle Switch</h2>

<label class="switch">
  <input type="checkbox">
  <span class="slider">
     <span class="number">99</span>
  </span>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <span class="slider">
     <span class="number">99</span>
  </span>
</label><br><br>

<label class="switch">
  <input type="checkbox">
  <span class="slider round">
     <span class="number">99</span>
  </span>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <span class="slider round">
     <span class="number">99</span>
  </span>
</label>

Answer 3

Answer №2

That white circular button in the toggle is actually styled using the CSS selector .slider:before. To customize it, all you need to do is adjust the content property of .slider:before with your desired number (e.g. 99):

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "99"; /* -------UPDATE THIS LINE------- */
  text-align: center; /* Additional styles for visual appeal! */
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Circular sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

<h2>Toggle Switch</h2>

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <span class="slider"></span>
</label><br><br>

<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <span class="slider round"></span>
</label>

Answer 4

That white circular button in the toggle is actually styled using the CSS selector .slider:before. To customize it, all you need to do is adjust the content property of .slider:before with your desired number (e.g. 99):

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "99"; /* -------UPDATE THIS LINE------- */
  text-align: center; /* Additional styles for visual appeal! */
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Circular sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

<h2>Toggle Switch</h2>

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <span class="slider"></span>
</label><br><br>

<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <span class="slider round"></span>
</label>

Answer 5

Answer №3

You have the option to utilize the content css in order to style the text.

The content CSS property is utilized with the ::before and ::after pseudo-elements to create content within an element. Elements added using the content property are considered anonymous replaced elements.

Stack Snippet

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "99";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
      text-align: center;
    line-height: 26px;
}

input:checked+.slider {
  background-color: #2196F3;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

<h2>Toggle Switch</h2>

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
<br>
<label class="switch">
  <input type="checkbox" checked>
  <span class="slider round"></span>
</label>

Answer 6

You have the option to utilize the content css in order to style the text.

The content CSS property is utilized with the ::before and ::after pseudo-elements to create content within an element. Elements added using the content property are considered anonymous replaced elements.

Stack Snippet

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "99";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
      text-align: center;
    line-height: 26px;
}

input:checked+.slider {
  background-color: #2196F3;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

<h2>Toggle Switch</h2>

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
<br>
<label class="switch">
  <input type="checkbox" checked>
  <span class="slider round"></span>
</label>

Embedding content within a toggle slider

Answer №1

Answer №2

Answer №3

Similar questions

Ensure that a div remains active even after it has been selected through AJAX using jQuery

What are some effective methods for testing web applications on mobile devices?

What is the best way to create rounded edges for a spinning spinner using CSS?

The appearance of the webkit-scrollbar is not reflecting the intended style

Struggling to unlock the mystery of a jammed trigger box

How can I create an image of a number using Bootstrap?

JavaScript error occurring when trying to validate Ajax response

Displaying mysqli results within a div while incorporating an onclick event for a javascript function that also includes another onclick event for a separate javascript function

Assist the floats to "ascend" and occupy the available space

How can I show two unique chart modals simultaneously?

Place the delete and edit buttons on the right side of the card

The Angular template driven forms are flagging as invalid despite the regExp being a match

Determine the location of an image with the help of Jquery

Is there a way for me to view the output of my TypeScript code in an HTML document?

Can the border become fainter and then more pronounced when hovered over?

Accordion checkbox with dynamic features

How to Extract Information from a Table Enclosed in a Div Using HTML Parsing?

What are the best methods for efficiently extracting web page content that is nested within HTML pages under the `<body>` tag?

CSS - Placeholder styling not being effective when selectors are grouped

Instructions on converting text to a Float value and displaying the calculated result in a separate div