Hallo zusammen,
ich würde gerne in einem Modul einen Button anbieten, mit welchem der Aufnahmestatus einer COVID Intensivstation angegeben werden kann. Das mit dem Button an such hat gut funktioniert. Leider klappt es noch nicht, dass alle anderen sehen, wenn jemand den Status geändert hat (auf Grün für aufnahmebereit).
Hat mir jemand einen Tipp, wie ich das hinbekomme? Vielen Dank.
HTML
<label class="switch">
<input type="checkbox"/>
<div class="slider">
</div>
</label>
CSS
.switch {
position: relative;
display: inline-block;
width: 150px;
height: 36px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ca2222;
-webkit-transition: .4s;
transition: .4s;
border-radius: 6px;
}
.slider:before {
position: absolute;
content: "";
height: 34px;
width: 32px;
top: 1px;
left: 1px;
right: 1px;
bottom: 1px;
background-color: white;
transition: 0.4s;
border-radius: 6px;
}
input:checked + .slider {
background-color: #2ab934;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(116px);
}
.slider:after {
content:'SICHER NÖD';
color: white;
display: block;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}
input:checked + .slider:after {
content:'CHUM NUME';
}