I want to build a custom toggle switch, which has a Google maps like pin instead of a circle.
Therefore I did the following:
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Toggle Switch</h2>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</body>
</html>
CSS
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 40px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.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: "";
left: 4px;
bottom: 10px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
width: 20px;
height: 20px;
border-radius: 0 50% 50% 50%;
border: 3px solid black;
transform: rotate(225deg);
margin-top: 20px;
}
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);
}
It is nearly what I was trying to do. But I need the pin to be rotated until the 'arrowhead' points to the bottom again. So a full rotation.
Is that somehow possible?
You can find my code here:
https://codepen.io/lsgit/pen/GRRbrQq
Thanks in advance.
Update these styles
.slider:before {
transform: translate(0px) rotate(-132deg);
}
input:checked + .slider:before {
transform: translate(25px) rotate(223deg);
}
use -web-kits and -ms yourself Thanks
Related
I'm trying to get the toggle to move it 100% to the right. As I'm trying to make it responsive, I can't set it to move an xx amount of pixels.
Can you please help?
input:checked + .slider:before {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
https://jsfiddle.net/Lc1tdhgb/1/
Thanks
setTimeout(function() {
document.getElementById('togBtn').checked = true;
}, 1000)
#toggle {
width: 100%;
height: 100%;
position: relative;
}
.switch {
position: absolute;
display: inline-block;
width: 100%;
/*min-height: 32px;*/
height: auto;
top: 0;
}
.switch input {
display: none;
}
.slider {
cursor: pointer;
background-color: #ca2222;
-webkit-transition: .5s;
transition: .5s;
border-radius: 32px;
padding: 12px 0;
}
.slider:before {
position: absolute;
content: "";
height: 1.1em;
width: 1.1em;
left: 3px;
bottom: 3px;
background-color: white;
-webkit-transition: .5s;
transition: .5s;
border-radius: 50%;
}
input:checked+.slider {
background-color: #3eab37;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
left: calc(100% - 20px);
/*-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);*/
}
/*------ ADDED CSS ---------*/
.slider:after {
content: 'OFF';
color: white;
display: block;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-size: 0.7em;
font-family: Roboto, sans-serif;
}
input:checked+.slider:after {
content: 'ON';
}
/*--------- END --------*/
<div id="toggle">
<label class="switch"><input type="checkbox" id="togBtn"><div class="slider round"></div></label>
</div>
Well, just make sure that the container of the elements follow a position: relative;, so the wrapper have the restrains for the absolute elements inside of it. Then, right is actually how far from right you want the element to be, in this case, you could've used either right: 0%; or left: 100%; although you've encountered the error in the fact that you'd be ignoring margins from the parent's style. That's why I added left: calc(100% - 20px); (20px was on trial and error, until I got it aligned with the outter border of the switch!), then now it works as wanted. Glad to help :)
This question already has answers here:
HTA and 'x-ua-compatible' meta tag
(5 answers)
CSS3 support for HTA
(3 answers)
Closed 3 years ago.
I have a problem with running any script from HTA file because of meta tag.
If I run application without meta tag, then CSS does not work correctly but I can run a script. When I include meta tag, I cannot run any script (undefined), but CSS is fine then
I have already tried with different meta tags.
When I remove <meta http-equiv="x-ua-compatible" content="IE=edge">, then CSS does not work, but closing script does. When I add this piece of code, then it shows error: "'ExitForm' is undefined"
<html>
<head>
<title>Checklist</title>
<meta http-equiv="x-ua-compatible" content="IE=edge">
<HTA:APPLICATION ID="objHTAHelpomatic" APPLICATIONNAME="Checklist" SCROLL="no" SINGLEINSTANCE="yes" WINDOWSTATE="maximize" />
<style type="text/css">
.inputGroup {
background-color: #fff;
display: block;
margin: 10px 0;
position: relative;
}
.inputGroup label {
padding: 12px 30px;
width: 100%;
display: block;
text-align: left;
color: #3c454c;
cursor: pointer;
position: relative;
z-index: 2;
transition: color 200ms ease-in;
overflow: hidden;
}
.inputGroup label:before {
width: 10px;
height: 10px;
border-radius: 50%;
content: '';
background-color: #5562eb;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale3d(1, 1, 1);
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0;
z-index: -1;
}
.inputGroup label:after {
width: 32px;
height: 32px;
content: '';
border: 2px solid #d1d7dc;
background-color: #fff;
background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
background-repeat: no-repeat;
background-position: 2px 3px;
border-radius: 50%;
z-index: 2;
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
transition: all 200ms ease-in;
}
.inputGroup input:checked ~ label {
color: #fff;
}
.inputGroup input:checked ~ label:before {
transform: translate(-50%, -50%) scale3d(56, 56, 1);
opacity: 1;
}
.inputGroup input:checked ~ label:after {
background-color: #54e0c7;
border-color: #54e0c7;
}
.inputGroup input {
width: 32px;
height: 32px;
order: 1;
z-index: 2;
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
visibility: hidden;
}
.form {
padding: 0 16px;
max-width: 550px;
margin: 50px auto;
font-size: 18px;
font-weight: 600;
line-height: 36px;
}
body {
background-color: #d1d7dc;
font-family: 'Fira Sans', sans-serif;
}
*, *::before, *::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
code {
background-color: #9aa3ac;
padding: 0 8px;
}
</style>
</head>
<script Language="VBScript">
Sub ExitForm()
Close
End Sub
</script>
<body>
<form class="form">
<div class="inputGroup">
<input id="option1" name="option1" type="checkbox" checked />
<label for="option1">dupa</label>
</div>
</form>
<input class="button" type="button" value="CLOSE" name="close" onClick="ExitForm"><br>
</body>
</html>
I am having some issues I cannot seem to figure out with styling a toggle switch as required. I currently have it like this:
It however needs to look like this:
Here is my HTML:
<label class="switch"><input #handlingUnitAdvancedOptionsCheckBox id="handlingUnitAdvancedOptionsCheckBox" type="checkbox" [checked]="handlingModel.advancedOptions"
(change)="handlingUnitAdvancedOptionsToggle(handlingUnitAdvancedOptionsCheckBox.checked)" />
<span class="slider round"></span>
</label>
Here is my css:
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 50px!important;
height: 24px!important;
cursor: pointer;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
display: block;
width: 22px!important;
height: 22px!important;
margin: 1px;
background: #fff;
position: absolute;
top: 0;
bottom: 0;
right: 26px;
border-radius: 20px;
transition: margin .3s ease-in 0s;
transition-property: margin;
transition-duration: 0.3s;
transition-timing-function: ease-in;
transition-delay: 0s;
box-shadow: 1px 2px 7px #444;
}
input:checked + .slider {
background-color: #236093;
}
input:focus + .slider {
box-shadow: 0 0 1px #236093;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 20px;
}
.slider.round:before {
border-radius: 50%;
}
Not sure where I am going wrong here or what I need to adjust. I have tried changing the transform and the padding but I cannot seem to get it right.
You can use the following solution:
.switch {
cursor: pointer;
display: inline-block;
height: 24px;
position: relative;
width: 50px;
overflow:hidden;
}
.switch input {
height: 0;
opacity: 0;
width: 0;
}
.slider {
background: #ccc;
bottom: 0;
cursor: pointer;
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
background: #fff;
border-radius: 50%;
bottom: 1px;
box-shadow: 3px 0px 7px #444;
content: "";
display: block;
height: 22px;
left: 1px;
position: absolute;
right: 50px;
top: 1px;
width: 22px;
transition-property: all;
transition-duration: .6s;
}
input:checked + .slider {
background: #236093;
}
input:checked + .slider:before {
box-shadow: -3px 0px 7px #002551;
left: calc(100% - 23px); /** width of .slider:before + 1px */
}
.slider.round {
border-radius: 24px;
}
<label class="switch">
<input #handlingUnitAdvancedOptionsCheckBox id="handlingUnitAdvancedOptionsCheckBox" type="checkbox" [checked]="handlingModel.advancedOptions"
(change)="handlingUnitAdvancedOptionsToggle(handlingUnitAdvancedOptionsCheckBox.checked)" />
<span class="slider round"></span>
</label>
I've made a toggle with the following CSS:
.switch {
position: relative;
display: inline-block;
width: 55px;
height: 25px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border-radius: 34px;
-webkit-transition: .2s;
transition: .2s;
}
.slider:before {
position: absolute;
content: "";
height: 25px;
width: 25px;
left: 0px;
bottom: 0px;
background-color: white;
border-radius: 50%;
-webkit-transition: .2s;
transition: .2s;
}
input:checked + .slider:before {
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
}
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
Span needs to have an image inside, and when is checked another image, it should look like this:
Need to achieve this with CSS/React.
I was able to make something out:
* {
font-family: 'Open Sans', 'Segoe UI';
}
.switch {
position: relative;
display: inline-block;
width: 55px;
height: 25px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border-radius: 34px;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.slider:before {
position: absolute;
content: "";
height: 25px;
width: 25px;
left: 0px;
bottom: 0px;
background-image: url('https://i.imgur.com/J4GQTYs.png');
background-size: contain;
border-radius: 50%;
-webkit-transition: 0.2s;
transition: 0.2s;
}
input:checked + .slider:before {
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
background-image: url('https://i.imgur.com/Q0iHcOX.png');
}
input:checked ~ .unchecked,
input ~ .unchecked,
input ~ .checked {
position: absolute;
font-weight: 600;
display: none;
top: 1px;
}
.unchecked {
right: 5px;
}
.checked {
left: 5px;
}
input:checked ~ .checked,
input ~ .unchecked {
display: block;
}
<label class="switch">
<input type="checkbox" />
<span class="slider round"></span>
<span class="checked">FR</span>
<span class="unchecked">EN</span>
</label>
You can add:
background-image: url(IMAGE); for the image and background-size: contain; to make it visiable. Only using the background-image property won't work.
I added them to your example to: slider:before {} and input:checked + .slider:before {} to get the effect you're looking for. I've used different images as you stated as I couldn't find them so quickly. But of course you can just edit the url to the images you prefer (please don't use external images as I did in this example, add them to your server).
.switch {
position: relative;
display: inline-block;
width: 55px;
height: 25px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border-radius: 34px;
-webkit-transition: .2s;
transition: .2s;
}
.slider:before {
position: absolute;
content: "";
height: 25px;
width: 25px;
left: 0px;
bottom: 0px;
background-color: white;
border-radius: 50%;
-webkit-transition: .2s;
transition: .2s;
background-image: url('https://cdn1.iconfinder.com/data/icons/european-country-flags/83/italy-512.png');
background-size: contain;
}
input:checked + .slider:before {
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
background-image: url('https://cdn1.iconfinder.com/data/icons/european-country-flags/83/france-512.png');
background-size: contain;
}
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
I've already done a question about transition, but this time I have to do something a lot harder, and I have got one more time a problem with transition, honestly I have no idea about why it won't work, anyway.
I made some king a "bar", anyway something like an interface, basically is button with a plus. When you hover the pointer on the button, it will go up and show other element, with the transition.
When I hover out the transition work only for the button with the plus (trigger1) but not for the other hyperlink. Why?
Here the code:
html
<html>
<head>
<title>Web Interface Test</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="/interface.css" />
</head>
<body>
<div class="trigger">
<div class="div">
<center>
<span class="text">+</span>
</center>
</div>
<a class="element" href="#"></a>
<a class="element2" href="#"></a>
<a class="element3" href="#"></a>
</div>
</body>
</html>
And CSS:
.div {
width: 50px;
height: 50px;
bottom: 5%;
right: 5%;
background: black;
transition: transform 300ms ease-in-out;
position: fixed;
z-index: 5;
border-radius: 50%;
visibility: visible;
}
.trigger:hover .div {
transform: translate(0px, -200px) rotate(45deg);
}
.trigger {
width: 50px;
height: 50px;
background: red;
position: absolute;
bottom: 5%;
right: 5%;
position: fixed;
z-index: 4;
border-radius: 50%
}
.element {
width: 50px;
height: 50px;
bottom: 5%;
right: 5%;
background: indigo;
transition: transform 300ms ease-in-out;
position: fixed;
z-index: 3;
visibility: hidden;
border-radius: 50%;
}
.trigger:hover .element {
transform: translate(0px, -50px);
visibility: visible;
}
.element2 {
width: 50px;
height: 50px;
bottom: 5%;
right: 5%;
background: yellow;
transition: transform 300ms ease-in-out;
position: fixed;
z-index: 3;
visibility: hidden;
border-radius: 50%;
}
.trigger:hover .element2 {
transform: translate(0px, -100px);
visibility: visible;
}
.element3 {
width: 50px;
height: 50px;
bottom: 5%;
right: 5%;
background: blue;
transition: transform 300ms ease-in-out;
position: fixed;
z-index: 3;
visibility: hidden;
border-radius: 50%;
}
.trigger:hover .element3 {
transform: translate(0px, -150px);
visibility: visible;
}
.text {
color: white;
font-size: 40px;
top:
}
Thank's a lot for the help!
This is because you set visibility: hidden on the elements when your .trigger element is not being hovered. It looks like they're not transitioning, but in reality, they're just disappearing.