I am trying to implement this example:
https://mdbootstrap.com/snippets/jquery/bartek-malanowski/517057
However, seems like the CSS files from mdboostrap are not being loaded:
I imported the mdboostrap CSS and JS links and I have a custom css file with the custom css, but it's not working... Can you help me please?
Thanks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.0/css/mdb.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/Custom.css">
<!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.0/js/mdb.min.js"></script>
</head>
<body>
<div class="container"><br/>
<div class="col-lg-8 m-auto d-block">
<!-- Switch -->
<div class="p-5">
<div class="switch switch-info">
<label>
Off
<input type="checkbox">
<span class="lever"></span> On
</label>
</div>
</div>
</div>
</div>
</body>
</html>
And the css file:
/* Switch info */
.switch-info label input[type=checkbox]:checked+.lever {
background-color: #33b5e5;
}
.switch-info label input[type=checkbox]:checked+.lever:after {
background-color: #0099CC;
}
Use the following code :-
HTML -
<label class="custom-control custom-checkbox"><span>Grayscale:</span>
<input type="checkbox" id="grayscale" class="custom-control-input">
<span class="custom-control-indicator"></span>
</label>
CSS -
/*-------------------------------------------------- Custom Check Box -----------------------------------------------------------------------*/
.custom-control-input {
display: none;
}
.custom-checkbox {
min-height: 1rem;
padding-left: 0;
margin-right: 0;
cursor: pointer;
}
.custom-checkbox .custom-control-indicator {
content: "";
display: inline-block;
position: relative;
width: 30px;
height: 10px;
background-color: #818181;
border-radius: 15px;
margin-right: 10px;
-webkit-transition: background .3s ease;
transition: background .3s ease;
vertical-align: middle;
margin: 5px 16px;
box-shadow: none;
float: right;
}
.custom-checkbox .custom-control-indicator:after {
content: "";
position: absolute;
display: inline-block;
width: 18px;
height: 18px;
background-color: #f1f1f1;
border-radius: 21px;
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
left: -2px;
top: -4px;
-webkit-transition: left .3s ease, background .3s ease, box-shadow .1s ease;
transition: left .3s ease, background .3s ease, box-shadow .1s ease;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-indicator {
background-color: #f57727;
background-image: none;
box-shadow: none !important;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-indicator:after {
background-color: #f57727;
left: 15px;
}
.custom-checkbox .custom-control-input:focus ~ .custom-control-indicator {
box-shadow: none !important;
}
Related
Am having some trouble with toggling a FAB from hamburger to x.
The FAB has one primary icon, & three secondary icons. Clicking the primary icon will toggle the secondary icons vertically, & it should also toggle the animation from hamburger to x at any click within the primary icon.
Currently, my code does not toggle the animation from hamburger to x if a user were to precisely click on either of the three hamburger lines.
I do hope someone is willing to help explain where I have gone wrong, coz it just feels so close but I'm not able to figure out where my mistake is.
Tutorial Credits:
Tran Anh Tuat
w3newbie
I am new to coding & my codes below are the combination of my efforts from studying tutorials from the above links. Will be grateful for any & all help. Thank you in advance!
let fabAnim = document.querySelector('.priFabWhite')
let fabItems = document.querySelectorAll('.secFabOrange')
showItems = () => {
fabItems.forEach((e, index) => {
e.style.bottom = `calc(${(index + 1.5) * 70}%)`
})
}
hideItems = () => {
fabItems.forEach(e => {
e.style.bottom = `20px`
})
}
/* Triggers click animation rotation of fabToggle button */
fabAnim.addEventListener('click', (e) => {
e.target.classList.toggle('active')
if (e.target.classList.contains('active')) {
showItems()
} else {
hideItems()
}
})
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html, body{
height: 100vh;
background-color: black;
position: relative;
}
.wrapper{
position: absolute;
display: grid;
place-items: center;
width: 100px;
height: 100px;
cursor: pointer;
right: 10px;
bottom: 50px;
}
.wrapper > button {
position: absolute;
outline:transparent;
border: transparent;
cursor: pointer;
}
.secFabOrange{
background-color: rgb(209, 84, 0);
width: 50px;
height: 50px;
font-size: 25px;
transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1);
display: grid;
place-items: center;
border-radius: 30px;
color: white;
}
.secFabOrange > i{
transition: 0.6s ease-in-out;
}
.priFabWhite {
background-color:white;
width: 70px;
height: 70px;
position: absolute;
border-radius: 50px
}
.line{
position: absolute;
right:25%;
height:6px;
width: 50%;
border-radius: 8px;
transition: all cubic-bezier(0.26, 0.1, 0.27, 1.55) 0.35s;
}
.topGreen{
top:25%;
background: green;
}
.middleRed{
top: 47%;
background: red;
}
.bottomBlue{
bottom: 25%;
background: blue;
}
.priFabWhite.active .topGreen{
transform: rotate(45deg);
top:45%;
}
.priFabWhite.active .middleRed{
transform: rotate(-45deg);
top: 45%;
}
.priFabWhite.active .bottomBlue{
transform: rotate(-45deg);
top: 45%;
}
/* START popup style */
.popup {
position: absolute;
top:50%;
left:40%;
transform: translate(-50%, -50%);
width:70%;
height:90%;
padding:30px 20px;
background:#f5f5f5;
border-radius:10px;
box-sizing:border-box;
z-index:2;
text-align:justified;
}
.popup .title {
margin:5px 0px;
font-size:24px;
font-weight:600;
}
.popup .description{
color:#222;
font-size:16px;
padding:5px;
}
/* END popup style */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fab Toggle Anim</title>
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- START fab divs -->
<div class="wrapper">
<button class="secFabOrange">
<i class='bx bx-trip'></i>
</button>
<button class="secFabOrange">
<i class='bx bx-trip'></i>
</button>
<button class="secFabOrange">
<i class='bx bx-exit'></i>
</button>
<button class="priFabWhite">
<span class="line topGreen"></span>
<span class="line middleRed"></span>
<span class="line bottomBlue"></span>
</button>
</div>
<!-- END fab divs -->
<!-- START popup divs -->
<div class="popup center">
<div class="title">
FAB Hamburger to X Animation
</div>
<br>
<div class="description">
<h3>Intention:</h3>
<ol>
<li>Anim1: Toggle <strong>secFabOrange</strong> from <strong>priFabWhite</strong> on click.</li>
<li>Anim2: Hamburger to x.
<li><mark>Anim3: Toggle Anim1 & Anim2 <strong>from any point within priFabWhite</strong> on click.</mark></li>
</ol>
<br>
<h3>Problem with Current Code:</h3>
<ul>
<li>For point 3, my code toggles Anim1 & Anim2 <strong>only when white portion of priFabWhite is clicked</strong></li>
<li>If user <strong>precisely clicks</strong> either of the three hamburger lines (green, red, blue), <strong>only Anim1 is triggered</strong>.</li>
</ul>
<br>
<h3>Tutorial Credits:</h3>
<ul>
<li>Tran Anh Tuat</li>
<li>w3newbie</li>
</ul>
</div>
<!-- END popup divs -->
<script src="scripts.js"></script>
</body>
</html>
Managed to find a solution for the problem. Added class avoid-clicks in html and css.
let fabAnim = document.querySelector('.priFabWhite')
let fabItems = document.querySelectorAll('.secFabOrange')
showItems = () => {
fabItems.forEach((e, index) => {
e.style.bottom = `calc(${(index + 1.5) * 70}%)`
})
}
hideItems = () => {
fabItems.forEach(e => {
e.style.bottom = `20px`
})
}
/* Triggers click animation rotation of fabToggle button */
fabAnim.addEventListener('click', (e) => {
e.target.classList.toggle('active')
if (e.target.classList.contains('active')) {
showItems()
} else {
hideItems()
}
})
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html, body{
height: 100vh;
background-color: black;
position: relative;
}
.wrapper{
position: absolute;
display: grid;
place-items: center;
width: 100px;
height: 100px;
cursor: pointer;
right: 10px;
bottom: 50px;
}
.wrapper > button {
position: absolute;
outline:transparent;
border: transparent;
cursor: pointer;
}
.secFabOrange{
background-color: rgb(209, 84, 0);
width: 50px;
height: 50px;
font-size: 25px;
transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1);
display: grid;
place-items: center;
border-radius: 30px;
color: white;
}
.secFabOrange > i{
transition: 0.6s ease-in-out;
}
.priFabWhite {
background-color:white;
width: 70px;
height: 70px;
position: absolute;
border-radius: 50px
}
.line{
position: absolute;
right:25%;
height:6px;
width: 50%;
border-radius: 8px;
transition: all cubic-bezier(0.26, 0.1, 0.27, 1.55) 0.35s;
}
.topGreen{
top:25%;
background: green;
}
.middleRed{
top: 47%;
background: red;
}
.bottomBlue{
bottom: 25%;
background: blue;
}
.priFabWhite.active .topGreen{
transform: rotate(45deg);
top:45%;
}
.priFabWhite.active .middleRed{
transform: rotate(-45deg);
top: 45%;
}
.priFabWhite.active .bottomBlue{
transform: rotate(-45deg);
top: 45%;
}
/* START popup style */
.popup {
position: absolute;
top:50%;
left:40%;
transform: translate(-50%, -50%);
width:70%;
height:90%;
padding:30px 20px;
background:#f5f5f5;
border-radius:10px;
box-sizing:border-box;
z-index:2;
text-align:justified;
}
.popup .title {
margin:5px 0px;
font-size:24px;
font-weight:600;
}
.popup .description{
color:#222;
font-size:16px;
padding:5px;
}
/* END popup style */
.avoid-clicks {
pointer-events: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fab Toggle Anim</title>
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- START fab divs -->
<div class="wrapper">
<button class="secFabOrange">
<i class='bx bx-trip'></i>
</button>
<button class="secFabOrange">
<i class='bx bx-trip'></i>
</button>
<button class="secFabOrange">
<i class='bx bx-exit'></i>
</button>
<button class="priFabWhite">
<span class="line topGreen avoid-clicks"></span>
<span class="line middleRed avoid-clicks"></span>
<span class="line bottomBlue avoid-clicks"></span>
</button>
</div>
<!-- END fab divs -->
<!-- START popup divs -->
<div class="popup center">
<div class="title">
FAB Hamburger to X Animation
</div>
<br>
<div class="description">
<h3>Solution:</h3>
<ol>
<li>HTML: Added <strong>avoid-clicks</strong> into each span class for priFabWhite button in lines 30-32.</li>
<li>CSS: Defined <strong>avoid-clicks</strong> in lines 123-125.
</ol>
<br>
<br>
<h3>Tutorial Credits:</h3>
<ul>
<li>Tran Anh Tuat</li>
<li>w3newbie</li>
</ul>
</div>
<!-- END popup divs -->
<script src="scripts.js"></script>
</body>
</html>
s there a way for the content inside a border-box to stay in its place while the border of the box in the background is changing width? I'm using radio buttons for a carousel and now I'm decorating it to look like box buttons. Currently, I have a left border turn into a right border (kinds of like drawers opening), but then the icons (the content I placed inside the 'box buttons') get dragged while the borders are moving. I want it to stay in place looking at how it is on hover so I tried using :before for the borders but then it didn't work.
[class^="panel_"] {
overflow: auto;
position: relative;
width: inherit;
height: inherit;
padding: 8%;
}
[class^="label_"] {
display: flex;
margin: 5px;
width: 32px;
height: 32px;
line-height: 32px;
justify-content: center;
align-items: center;
color: #c5c8d3;
background-color: transparent;
border: 1.5px solid #c5c8d3;
border-style: none none none solid;
transition: all 0.5s ease;
}
[class^="label_"]:hover {
color: #496676;
background-color: transparent;
border-color: #c5c8d3;
}
#button_home:checked~#navigation .label_home,
#button_compilation:checked~#navigation .label_compilation,
#button_about_me:checked~#navigation .label_about_me,
#button_code:checked~#navigation .label_code {
border-style: solid solid solid none;
animation: tab 1s ease-in-out forwards;
}
#keyframes tab {
from {
width: 0px;
background-color: transparent;
border-color: #c5c8d3;
color: #496676;
}
to {
width: 32px;
color: #496676;
background-color: #fff2f2;
border-color: #496676;
}
}
<head>
<link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
</head>
<body>
<input hidden type="radio" name="carousel-control" id="button_home" checked />
<input hidden type="radio" name="carousel-control" id="button_compilation" />
<input hidden type="radio" name="carousel-control" id="button_about_me" />
<input hidden type="radio" name="carousel-control" id="button_code" />
<div id="navigation">
<label for="button_home" class="label_home"><span class="th th-heart-1-o"></span> </label>
<label for="button_compilation" class="label_compilation"><span class="th th-folder-3-o"></span></label>
<label for="button_about_me" class="label_about_me"><span class="th th-eyelash"></span></label>
<label for="button_code" class="label_code"><span class="th th-code"></span></label>
</div>
</body>
Use pseudo element:
[class^="label_"] {
display: flex;
margin: 5px;
width: 32px;
height: 32px;
line-height: 32px;
justify-content: center;
align-items: center;
color: #c5c8d3;
position:relative;
overflow:hidden;
}
[class^="label_"]::before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background-color: #fff2f2;
border: 1.5px solid #496676;
border-left:0;
transition: all 0.5s ease;
transform:translateX(calc(1.5px - 100%)); /* hide all the element and show only one border */
}
[class^="label_"]:hover {
color: #496676;
background-color: transparent;
border-color: #c5c8d3;
}
#button_home:checked~#navigation .label_home::before,
#button_compilation:checked~#navigation .label_compilation::before,
#button_about_me:checked~#navigation .label_about_me::before,
#button_code:checked~#navigation .label_code::before {
transform:translateX(0); /* show the element on click */
}
#button_home:checked~#navigation .label_home,
#button_compilation:checked~#navigation .label_compilation,
#button_about_me:checked~#navigation .label_about_me,
#button_code:checked~#navigation .label_code {
color:#496676;
}
<head>
<link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
</head>
<body>
<input hidden type="radio" name="carousel-control" id="button_home" checked />
<input hidden type="radio" name="carousel-control" id="button_compilation" />
<input hidden type="radio" name="carousel-control" id="button_about_me" />
<input hidden type="radio" name="carousel-control" id="button_code" />
<div id="navigation">
<label for="button_home" class="label_home"><span class="th th-heart-1-o"></span> </label>
<label for="button_compilation" class="label_compilation"><span class="th th-folder-3-o"></span></label>
<label for="button_about_me" class="label_about_me"><span class="th th-eyelash"></span></label>
<label for="button_code" class="label_code"><span class="th th-code"></span></label>
</div>
</body>
I am using animate.css in order to animate text on page load. I am delaying the effects but it is showing the text then animating it see?
You can see the animation in action here: https://gyazo.com/a51b4248203c72cbf81012e7f7fad112.
If you need to closer to my HTML & CSS: https://hastebin.com/dawawecuvi.xml
#import url('https://fonts.googleapis.com/css?family=Pacifico');
.logotext{
color: limegreen;
font-size: 34px;
font-family: 'Pacifico', cursive;
}
.navbar-default{
background-color: dimgrey !important;
box-shadow: 0px 5px 0px limegreen !important;
}
.navbar-default .navbar-nav > li > a {
color: white !important;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: white !important;
}
li{
font-size: 20px;
}
.navbar-right{
padding-right: 80px;
}
.hvr-sweep-to-top:before {
background: limegreen ;
}
.container-fluid {
padding: 0px;
}
.aboutmediv{
background-color: black;
height: 900px;
}
.imagetextbig {
position: absolute;
top: 240px;
width: 100%;
color: goldenrod;
font-size: 90px;
text-align: center;
animation: slideInLeft 1s;
animation-delay: 0.9s;
}
.navbar-fixed-top{
animation: slideInDown 1s;
animation-delay: 0.1s;
}
.imgtext2{
margin-top: 100px;
animation: slideInRight 1s;
animation-delay: 0.9s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="Nydigov">
<meta name="description" content="Nydigovs portfolio site. Check out my recent work!">
<meta name="keywords" content="Fellex,Nydigov,NY,nydigov,fellex,fell,fellex.me,Fellex.me">
<link rel="shortcut icon" href="img/athyslogo.png">
<title>Nydigov</title>
<!--All links secure-->
<!--Latest compiled and minified CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--Secure link to paper bootstrap theme -->
<link rel="stylesheet" href="https://bootswatch.com/paper/bootstrap.min.css" integrity="sha384-I3UMl9KZhtYWd8htMkmvi+cG4KsfRMyoiX7O3teTUiqrP+34X3fuqYI5GUOC0N82" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--Animate.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" integrity="sha384-OHBBOqpYHNsIqQy8hL1U+8OXf9hH6QRxi0+EODezv82DfnZoV7qoHAZDwMwEJvSw" crossorigin="anonymous">
<!--FontAwesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!--Hover CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.1.1/css/hover-min.css" integrity="sha384-VTeRBIyCP1UOtJsYqkdWx9FnCcVTZlBzNKjt0R0FMPZUVvNmz2bflo5bg7kbZDU1" crossorigin="anonymous">
<!--Main Stylesheet-->
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><p class="logotext">Nydigov</p></a>
</div>
<ul class="nav navbar-nav pull-right navbar-right">
<li class="hvr-sweep-to-top">Home</li>
<li class="hvr-sweep-to-top">Past Work</li>
<li class="hvr-sweep-to-top">Contact</li>
</ul>
</div>
</nav>
<!--Content-->
<div class="container-fluid">
<!--Image-->
<div class="image">
<img src="images/imagebacktop.jpg" alt="" class="img-responsive mainimg">
<h2 class="imagetextbig">Hi, I'm Nydigov</h2>
<h2 class="imagetextbig imgtext2">And this is my site</h2>
</div>
<!--About Me-->
<div class="aboutmediv"></div>
</div>
</body>
</html>
Looking at your CSS, I presume these are the two elements we're talking about:
.imagetextbig {
position: absolute;
top: 240px;
width: 100%;
color: goldenrod;
font-size: 90px;
text-align: center;
animation: slideInLeft 1s;
animation-delay: 0.9s;
}
.imgtext2{
margin-top: 100px;
animation: slideInRight 1s;
animation-delay: 0.9s;
}
If you want them hidden at first and then to slide in from the sides of the page, you have two options. The first option is to change the CSS so they start off-screen and animate on-screen. But there isn't a plug-and-play solution for that where you can just use the animate.css animation out of the box and have it work.
So we can do the second option, which is to hide them as the page is loaded, then have them appear when the animation starts. Use visibility: hidden in your default styles for the elements to hide them when the page first loads.
.imagetextbig {
position: absolute;
top: 240px;
width: 100%;
color: goldenrod;
font-size: 90px;
text-align: center;
animation: slideInLeft 1s;
animation-delay: 0.9s;
visibility: hidden; /*add this*/
}
.imgtext2{
margin-top: 100px;
animation: slideInRight 1s;
animation-delay: 0.9s;
visibility: hidden; /*add this*/
}
Then, in the animation, we want to make sure they switch to visibility: visible, otherwise you'll be animating an invisible element.
If we go to the animate.css website and check their source code, we can see that the animation for slideInLeft looks like this:
#keyframes slideInLeft {
0% {
transform: translate3d(-100%,0,0);
visibility: visible;
}
to {
transform: translateZ(0);
}
}
In other words, setting the elements to visible at the start of the animation is already taken care of for you. So just adding visibility: hidden to the default styles at the start is all you need. The slideInRight animation is similar to the slideInLeft one: it also sets visibility: visible at its start. So nothing to worry about there either.
I am trying to create ON-OFF switch by referring the link
Here i can not use the FontAwesome reference in the index.html file and what i have done is i have copied the font-awesome-css file in my project. But the switch ON-OFF button is not getting displayed.
Here i have deleted the
reference from index.html and the content of font-awesome.min.css is copied on my style.css file
My requirement is to create ON-OFF switch based on the model value(Boolean).
and it should have edit (ON/OFF) feature in it.
Can anyone suggest why the css file didn't work or is there any other way i can do it .
Fontawesome simple switch
<style>
.active, .inactive {
font-size: 26px;
cursor: pointer;
}
.active, .inactive {
font-size: 26px;
cursor: pointer;
}
i.active {
color: #5cb85c;
}
i.inactive {
color: #d9534f;
}
</style>
<i class="fa fa-toggle-on" ng-class="isActive?'active':'fa-rotate-180 inactive'" ng-click="isActive=!isActive" />
"isActive"(bool) is the switch status
<html lang="en">
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script language="javascript">
angular
.module('myApp', ['ngMaterial'])
.controller('switchController', switchController);
function switchController($scope) {
$scope.data = {
switch1: true
};
$scope.message = 'false';
$scope.onChange = function(state) {
$scope.message = state;
};
}
</script>
</head>
<body ng-app="myApp">
<div id="switchContainer" ng-controller="switchController as ctrl" layout="column" ng-cloak>
<md-switch ng-model="data.switch1" aria-label="Switch 1">
Switch 1: {{ data.switch1 }}
</md-switch>
</div>
</body>
</html>
I have copied the code from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch
<!DOCTYPE html>
<html>
<head>
<style>
.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%;
}
</style>
</head>
<body>
<h2>Toggle Switch</h2>
<label class="switch">
<input type="checkbox">
<div class="slider"></div>
</label>
<label class="switch">
<input type="checkbox" checked>
<div class="slider"></div>
</label><br><br>
<label class="switch">
<input type="checkbox">
<div class="slider round"></div>
</label>
<label class="switch">
<input type="checkbox" checked>
<div class="slider round"></div>
</label>
</body>
</html>
I have the following HTML code:
<div class="container">
<form name="queryForm" class="form-inline text-center">
<p class="checkbox-inline">
<input type="checkbox" name="optionsRadios" id="checkOther" value="other" ng-model="formData.other" ng-true-value="'other'" ng-init="formData.other='other'">Other</p>
</form>
</div>
and the result of that is:
What's the simplest way of changing this color to a given one, for example D7B1D7?
If you use bootstrap and you need to change checkbox background color, just override these styles:
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
background-color: green!important;
}
.custom-checkbox .custom-control-input:checked:focus ~ .custom-control-label::before {
box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 255, 0, 0.25)
}
.custom-checkbox .custom-control-input:focus ~ .custom-control-label::before {
box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 0, 0, 0.25)
}
.custom-checkbox .custom-control-input:active ~ .custom-control-label::before {
background-color: #C8FFC8;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="myTest custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1" />
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
I've adapted the .squaredThree class from this CodePen for your example. There's a Fiddle link at the bottom of my answer if you want to see a live example.
Here's the updated CSS:
/* .squaredThree */
.squaredThree {
position: relative;
float:left;
}
.squaredThree label {
width: 20px;
height: 20px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
background: #D7B1D7;
border-radius: 4px;
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.4);
}
.squaredThree label:after {
content: '';
width: 9px;
height: 5px;
position: absolute;
top: 4px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
background: transparent;
opacity: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.squaredThree label:hover::after {
opacity: 0.3;
}
.squaredThree input[type=checkbox] {
visibility: hidden;
}
.squaredThree input[type=checkbox]:checked + label:after {
opacity: 1;
}
/* end .squaredThree */
I've updated your HTML to include another label, as the original label is used as a pseudo checkbox. This is your updated HTML:
<div class="container">
<form name="queryForm" class="form-inline">
<div class="squaredThree">
<input type="checkbox" name="optionsRadios" id="checkOther" value="other" ng-model="formData.other" ng-true-value="'other'" ng-init="formData.other='other'">
<label for="checkOther"></label>
</div>
<label class="label-text">Other</label>
</form>
</div>
Note that the additional label exists outside the .squaredThree div. The label has a class of .label-text as some additional styling rules are needed to move the text slightly to the right of the checkbox:
.label-text {
position: relative;
left: 10px;
}
Finally, the size of the check in the checkbox isn't quite right so an additional rule is needed to rectify that:
*,
::before,
::after {
box-sizing: initial;
}
Fiddle Demo showing the above in action.
Simple version of AndrewRIGHT's answer:
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
background-color: #333;
border-color: #333;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
border-color: #D7B1D7;
background-color: #D7B1D7;
}
input[type=checkbox] does not not have a background-color property. You can use other ways to get your desirable result:
You can use the checkbox inside a div and then style the div according to your needs.
<div class="row">
<input type="checkbox" />
</div>
You can use pseudo elements like these:
input[type=checkbox] {
cursor: pointer;
}
input[type=checkbox]:after {
content: " ";
background-color: #D7B1D7;
display: inline-block;
visibility: visible;
}
input[type=checkbox]:checked:after {
content: "\2714";
}
For Bootstrap 4, the answer of #AndrewRIGHT is fine (How can I change the color of Bootstrap checkbox?). However, if you use Boostrap 5, the following styles are needed.
.form-check-input:checked{
background-color: green !important;
border: 0;
}
.form-check-input:focus, .label::after, label.form-check-label:focus, .form-check-input::after, .form-check-input:not(:disabled):not(.disabled):active:focus {
color: black;
outline: 0;
border: 0;
box-shadow: 0 0 0 0.1rem green !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">
Checked checkbox
</label>
</div>
This worked for me, to change the background-color of a checkbox from react-bootstrap. Put this in your css:
input[type=checkbox]{
accent-color: green;
}
input[type=checkbox]:checked{
background-color: #028DD2 !important;
}
this worked for me. Background color changes whenever you click on the checkbox, then changes back when you click it again.