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>
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>
What is the most efficient way to add a tool tip to these buttons without adding more markup? Is there a way to add the tooltip content in the javascript instead of markup--. I am using some javascript to basically grab everything inside of the bs-example class so I don't want to add unnecessary markup to the screen.
.dropdown, .dropleft, .dropright, .dropup{
position: inherit;
}
.dropdown-menu.show {
width: 100%;
background: #999;
padding: 0;
margin: 0;
border-radius: 0;
border: none
}
.dropdown-menu.show {
display: inline-flex;
}
.dropdown-item {
display: inline-block;
float: left;
width: auto;
color: #fff;
padding-top: 10px;
padding-bottom: 10px;
/* color: #333;*/
}
.start {
width:141px;
padding: 20px;
}
.btn {
min-width: 200px;
}
.btn-secondary1 {
color: #fff;
background-color: #919ca7;
border-color: #6c757d;
}
.btn-secondary2 {
color: #fff;
background-color: #7d878f;
border-color: #6c757d;
}
.btn-secondary3 {
color: #fff;
background-color: #6c757d;
border-color: #5c6268;
}
.btn-secondary4 {
color: #fff;
background-color: #4a5055;
border-color: #6c757d;
}
.ms-dlgCloseBtnImg {
border-style: none !important;
max-width: inherit !important;
}
.ms-dlgTitleBtns {
margin-right: 0px;
}
.fake-underline{
text-decoration: underline;
}
.circular-image {
align-content: center;
border-radius: 50%;
width: 150px;
height: 150px;
}
.accordion {
position:relative;
background-color:white;
}
.accordion > input {
display:block;
margin:0 0;
width:100%;
height:30px;
position:relative;
cursor:pointer;
opacity:0;
filter:alpha(opacity=0);
}
.accordion > label {
display:block;
font:bold 18px/30px Arial,Sans-Serif;
background-color:#a0aec0;
color:white;
margin:-30px 0 0 0;
padding:0 15px;
}
.accordion > div {
padding:10px 15px;
display:none;
}
.accordion > input:checked + label {
background-color:slateblue;
}
.accordion > input:checked + label + div {
display:block;
}
.accordion input[type="radio"]:checked + label i.icon::before{
transform: rotate(0deg);
}
i.icon{
position: relative;
margin-top: 10px;
width: 20px;
height: 20px;
margin-right: 25px;
}
i.icon::after{
content: "";
display: block;
width: 12px;
height: 3px;
background: #fff;
top: 10px;
left: 0;
position: absolute;
}
i.icon::before{
content: "";
display: block;
width: 12px;
height: 3px;
background: #fff;
top: 10px;
left: 0;
transform: rotate(90deg);
position: absolute;
transition: all linear 0.2s;
}
.bs-example {
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<H2>tester<i style="font-size:20px;cursor:pointer;margin-left:10px;" aria-hidden="true" class="fa fa-info-circle" v-on:click="showModalZ=true"></i></H2>
<p>Please select the corresponding rating for each</p>
<div class="bs-example">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="start">
<strong>1</strong>
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="Build" autocomplete="off" v-model="test" value="1">Novice
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="Build" autocomplete="off" v-model="test" value="1">Advanced Beginner
</label>
</div>
</div>
"Easiest" is very broad term. Read the docs:
https://getbootstrap.com/docs/4.0/components/tooltips/
The most "basic" steps:
1/3. include popper.min.js before bootstrap.js
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
2/3. Add data attributes to your markup + title :
<label data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Novice
</label>
3/3. initialize
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
attribute selectors:
https://api.jquery.com/attribute-equals-selector/
Example:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<H2>Tooltip</H2>
<div class="bs-example">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="start">
<strong>1</strong>
</label>
<label class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
<input type="radio" name="options" id="Build" autocomplete="off" v-model="test" value="1">Novice
</label>
<label class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
<input type="radio" name="options" id="Build" autocomplete="off" v-model="test" value="1">Advanced
</label>
</div>
</div>
<script>
/* https://getbootstrap.com/docs/4.0/components/tooltips/#example-enable-tooltips-everywhere */
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
"Without" any extra markup
Use:
$().tooltip(options)
Attaches a tooltip handler to an element collection.
https://getbootstrap.com/docs/4.0/components/tooltips/#tooltipoptions
<script>
$(document).ready(function(){
$(".bs-example label").tooltip({
title: "Hello tooltip."
});
});
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<H2>Tooltip</H2>
<div class="bs-example">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="start">
<strong>1</strong>
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="Build" autocomplete="off" v-model="test" value="1">Novice
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="Build" autocomplete="off" v-model="test" value="1">Advanced
</label>
</div>
</div>
<script>
$(document).ready(function(){
$(".bs-example label").tooltip({
title: "Hello tooltip."
});
});
</script>
The efficient way to use tooltip is to use existing property than re-inventing the wheel here is in bootstrap.
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
Hover me
</div>
I have issues with rendering some elements in Google Chrome. When I test the code with Firefox or Edge, everything is fine. It seems like Chrome computes a smaller width for "col-sm-1" or it is ignoring the padding.
I have the following html:
/*dropdown size*/
.dropdown-sm {
font-size: 1.25rem;
}
/* Custom dropdown */
.custom-dropdown {
position: relative;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
/* margin: 10px; */
}
.custom-dropdown select {
background-color: #00c292;
color: #fff;
font-size: inherit;
padding: .5em;
padding-right: 2.5em;
border: 0;
margin: 0;
border-radius: 3px;
text-indent: 0.01px;
text-overflow: '';
-webkit-appearance: button;
}
.custom-dropdown::before,
.custom-dropdown::after {
content: "";
position: absolute;
pointer-events: none;
}
.custom-dropdown::after {
content: "\25BC";
height: 1em;
font-size: .625em;
line-height: 1;
right: 1.2em;
top: 50%;
margin-top: -.5em;
}
.custom-dropdown::before {
width: 2em;
right: 0;
top: 0;
bottom: 0;
border-radius: 0 3px 3px 0;
}
.custom-dropdown select[disabled] {
color: rgba(0, 0, 0, .3);
}
.custom-dropdown select[disabled]::after {
color: rgba(0, 0, 0, .1);
}
.custom-dropdown::before {
background-color: rgba(0, 0, 0, .15);
}
.custom-dropdown::after {
color: rgba(0, 0, 0, .4);
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="checkbox.css">
</head>
<body>
<main role="main">
<div id="boottom-page" class="container-fluid">
<div class="row">
<div class="col-sm-1">
<span class="custom-dropdown dropdown-sm">
<select data-name="change-role">
<option>Change role to...</option>
<option>User</option>
<option>Author</option>
<option>Admin</option>
</select>
</span>
</div>
<div class="col-sm-2">
<div>
<div>
<button type="button" class="btn btn-info">Change </button>
<button type="button" class="btn btn-info">Delete</button>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
Both Firefox and Edge render them just fine:
but Chrome breaks the layout:
What can I do to fix the layout issues for Chrome?
Tested your code in Firefox and Chrome. They are nearly looking the same, nothing is breaking the layout.
But on your screenshot they are on different sizes.
I think there are different zoomlevels set in your browsers. Please
check if both are on 100%;
To avoid Chrome breaks the layout, add min-width to col-sm-1 and col-sm2.
HTML with new classes: dropdown-container and button-container
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="checkbox.css">
</head>
<body>
<main role="main">
<div id="boottom-page" class="container-fluid">
<div class="row">
<div class="col-sm-1 dropdown-container">
<span class="custom-dropdown dropdown-sm">
<select data-name="change-role">
<option>Change role to...</option>
<option>User</option>
<option>Author</option>
<option>Admin</option>
</select>
</span>
</div>
<div class="col-sm-2 button-container">
<div>
<div>
<button type="button" class="btn btn-info">Change </button>
<button type="button" class="btn btn-info">Delete</button>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
CSS
.dropdown-container {
min-width: 130px;
}
.button-container {
min-width: 230px;
}
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;
}
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.