dormant HTML toggle for guests

I am looking to include an HTML switch on my webpage, but with a twist - I want to be the only one able to change its status while visitors can only view it.

This is what I currently have:

.onoffswitch {
    position: relative; width: 122px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #FFFFFF; border-radius: 20px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 26px; padding: 0; line-height: 26px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "otevreno";
    padding-left: 12px;
    background-color: #34C258; color: #000000;
}
.onoffswitch-inner:after {
    content: "zavreno";
    padding-right: 12px;
    background-color: #D16464; color: #000000;
    text-align: right;
}
.onoffswitch-switch {
    display: block; width: 5px; margin: 10.5px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 92px;
    border: 2px solid #FFFFFF; border-radius: 20px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}

My question is: How can I make the switch inactive for visitors, allowing them to see the current status of the switch ("otevreno" or "zavreno"), while ensuring that only I can edit the status?

Thank you.

htmlcssswitch-statement

Answer №1

To make your input tag inactive, simply add the attribute disabled.

<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" disabled>

I've edited the styling to include background: transparent; and border: 2px solid transparent;

.onoffswitch-switch {
  display: block;
  width: 5px;
  margin: 10.5px;
  background: transparent;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 92px;
  border: 2px solid transparent;
  border-radius: 20px;
  transition: all 0.3s ease-in 0s;
}

Code Snippet:

.onoffswitch {
  position: relative;
  width: 122px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.onoffswitch-checkbox {
  display: none;
}
.onoffswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #FFFFFF;
  border-radius: 20px;
}
.onoffswitch-inner {
  display: block;
  width: 200%;
  margin-left: -100%;
  transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before,
.onoffswitch-inner:after {
  display: block;
  float: left;
  width: 50%;
  height: 26px;
  padding: 0;
  line-height: 26px;
  font-size: 14px;
  color: white;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  box-sizing: border-box;
}
.onoffswitch-inner:before {
  content: "otevreno";
  padding-left: 12px;
  background-color: #34C258;
  color: #000000;
}
.onoffswitch-inner:after {
  content: "zavreno";
  padding-right: 12px;
  background-color: #D16464;
  color: #000000;
  text-align: right;
}
.onoffswitch-switch {
  display: block;
  width: 5px;
  margin: 10.5px;
  background: transparent;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 92px;
  border: 2px solid transparent;
  border-radius: 20px;
  transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
  margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
  right: 0px;
}
<div class="onoffswitch">
  <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" disabled>
  <label class="onoffswitch-label" for="myonoffswitch">
    <span class="onoffswitch-inner"></span>
    <span class="onoffswitch-switch"></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

Looking for a solution to adjust the barely visible menu items on my website's mobile version, after recent changes made by Weebly. How can I make them more noticeable and user-friendly?

A BIT OF HISTORY Some years back, I created my initial Weebly website for my business at www.smehelper.com. The mobile version used to look fantastic! CHANGES OVER TIME However... about a year ago, Weebly made some alterations (I'm not sure what exac ...

csscss-selectorsmenuitemhamburger-menuweebly

Finding an element based on its styling attribute, such as its position on the left or right side

One particular block that caught my eye is the slider element: <div id="sliderDispo" class="slider slider-dispo" data-slider-init="" data-slider-color="#0077b5 #EC6E31 #E40B0B" data-slider-step="33" > <div class="slider__interval" ...

javascriptjqueryhtmlcss

The functionality of the dynamic text box is disrupted when a form element is added

I am in the process of developing a form and am looking to create dynamic text boxes using Bootstrap. The code that I have currently works as expected: $(function() { $(document).on('click', '.btn-add', function(e) { e.preventD ...

javascriptjqueryhtmltwitter-bootstrap

Create dynamic text on an HTML canvas starting from the center, displaying one character at a time while constantly adapting to the formatting

I am currently in the process of developing a website that has the capability to animate text, drawing each character onto a canvas one by one. I have successfully completed the initial coding for this functionality. However, my next challenge involves cen ...

javascripthtmlfunctioncanvassetinterval

Multiple hover highlighting techniques

Recently, I came up with an interesting concept for providing user feedback. My idea is to have a menu where hovering over it highlights an image that corresponds to the menu item, or vice versa - hovering over an image will highlight the corresponding men ...

jquerycsshover

What is the best way to utilize Django forms with a <select> value that is frequently used?

I am currently developing an application that enables users to interact with a database of information, including searching and saving entries. Within the search feature of the application, there are multiple fields where users should specify comparison o ...

htmldjango

Is there a way to trim HTML code while still maintaining the integrity of the closing tags?

Is there a way to create a blog post preview from HTML by properly closing the tags without rendering the whole content on the frontend? Currently, I am using react's dangerouslySetInnerHTML and setting styles like overflow: hidden and height: 150px. ...

javascripthtmlnext.jsserver-side

Can 'fr' units be used in the `calc()` function of CSS?

In this particular scenario, the query arises whether the CSS calc() function extends its support to the fr unit as presented in the below example? .sample-grid { --main-fr: 60fr; grid-template-columns: var(--main-fr) 1rem calc(100 - var(--main-fr ...

htmlcsscss-grid

Unable to load a different webpage into a DIV using Javascript

Today has been a bit challenging for me. I've been attempting to use JavaScript to load content into a <div>. Here is the JavaScript code I'm working with: function loadXMLDoc(filename) { var xmlhttp; if (window.XMLHttpRequest) { ...

javascripthtmlcss

Troubleshooting the Full Height Feature for Sidebar (Panel) in Twitter Bootstrap

I'm having issues with the Sidebar (Panel) in Twitter Bootstrap. I'm encountering some trouble with how it is displayed. Below is the CSS code I am using for the sidebar: .sharecartside .content { height: 100% !important; min-height: 10 ...

jqueryhtmlcsstwitter-bootstrap

Printing Strings in JavaScript IF Conditional Block

Hello there! I am looking for assistance with a JavaScript concept. Recently, I created some code where in the HTML file, there is a div element with an id of "GetID" where the string outputs are meant to be displayed. The JavaScript code looks something ...

javascripthtmlcss

Creating a stunning HTML 5 panorama with GigaPixel resolution

Interested in creating a gigapixel panorama using HTML 5 and Javascript. I found inspiration from this example - Seeking advice on where to begin or any useful APIs to explore. Appreciate the help! ...

javascriptjqueryhtmlcss

Display an image with only a portion visible, no canvas, no frame, and no need

My dilemma involves an img with a surrounding box div. http://jsfiddle.net/6d4yC/7/ 1) I am seeking to display only a portion of the image (250x150) without generating a white overlay when it is in its large size. Placing a #box1 div around the image has ...

javascriptjquerycss

Tips on eliminating horizontal scrolling in HTML and CSS

I am working on a simple web page template and encountering an issue with a horizontal scroll appearing on the page. I would like to remove it. Below is the code I am using: <html lang="FA"> <head> <meta charset="UTF-8&qu ...

htmlcssbootstrap-5

Refining a collection of item elements by examining a string attribute, disregarding letter case differences

I'm working on a code snippet that generates item components from my list of objects (Frivillig). <app-frivillig-item *ngFor="let frivilligEl of frivillige" [frivillig]="frivilligEl"> </app-frivillig-item> Now, I have a new requireme ...

htmllistangulartypescriptpipe

CSS files are failing to load in ASP .NET framework

I am facing a similar issue to the one described by another user on Stack Overflow here: Asp.NET not applying my CSS files However, after adding the following code to my web.config file, nothing seems to change: <location path="css"> &l ...

cssasp.net

When the mouse hovers over, the flash content in Firefox 7 will automatically reload

This is the structure I currently have: <div class="feed-item" style="position:relative;" id="feed-611" onmouseover="showDelete()" onmouseout="hideDelete()"> <div class="feed-avatar"> AVATAR </div> <div class="feed-content"> ...

htmlfirefoxbrowseronmouseover

Are web components capable of managing changes in CSS (maybe through cssChangedCallback)?

Is there a way to control the application of CSS to a web component similar to using attributes through attributeChangedCallback. I am currently developing a couple of web components that could benefit from being styled with CSS classes. However, I requir ...

javascriptcssweb-component

Using HTML5 Canvas to track click events for individual rectangles

This is a representation of time stamps in the form of color bars drawn on an HTML5 Canvas. Each color bar corresponds to a specific timestamp, such as 00:30 or 05:45. These color bars are essentially rectangles that I draw over the canvas. I am seeking ...

jqueryhtmlcanvasember.js

Angular validation with input binding using if statement

I have developed a reusable component for input fields where I included a Boolean variable called "IsValid" in my typescript file to handle validation messages. Here is the code from my typescript file: export class InputControlsComponent implements OnIn ...

htmlangulartypescriptinputbinding