I have to make a input checkbox simple but could not find some kind of optional class at bootstrap, also searched on github some library and could not find anything simple as making foundation.
Thanks for help.
You can play with this to get a sense of what can be done:
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
#import url(//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css');
input[type="checkbox"] {
display: none;
}
.custom-check {
display: inline-block;
width: 25px; height: 25px;
background: white;
border: 1px solid #CCCCCC;
font-family: 'Glyphicons Halflings';
font-size: 22px;
line-height: 1;
}
.custom-check::before {
content: "\e013";
color: #424242;
display: none;
}
input[type=checkbox]:checked+.custom-check::before {
display: block;
color: white;
background-color: #554236;
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<div>
<label >
<input type="checkbox">
<span class="custom-check"></span>
My Checkbox
</label>
</div>
If that's not enough, this answer to a similar question also gives a good overview of the css involved in customizing the bootstrap checkbox.
Just add an id(if it is just one checkbox) or class to that input element and define css for it:
CSS and HTML
'customId' would be the ID you give to the custom input tag:
<input id="customId" />
input#customId{
background: #888 !important;
border: none !important;
color: #000 !important;
}
jsut overwrite whatver styles you want to...
IMPORTANT: just add !important to the end of a style to force an override
Related
I'd like to style a regular input tag for file uploads.
I found many descriptions on how to style the button of the input ("choose file") using css. In my case I'd also like to style the text next to the button.
Here's the specific issue I'm working with:
All my buttons and inputs in this example are full-width. So should the file upload button.
How do I style the text next to the input file (e.g. other color and display: block, or any other styles to force a line break?)
.btn-secondary, input[type=file]::file-selector-button{
background-color: var(--color-secondary);
color: #333 !important;
transition: all .2s ease-in-out;
}
.btn-secondary:hover, input[type=file]::file-selector-button:hover{
background-color: #dcdcdc;
}
.btn-secondary:active, input[type=file]::file-selector-button:active{
background-color: #c1c1c1;
}
input[type=file]::file-selector-button{
margin: 0;
}
input[type=file] *{
display: block
}
There is a limited support for styling the text label of file type input, but we can do a little hack:
input[type=file] {
display: block;
color: red;
font-style: oblique;
}
input[type=file]::file-selector-button {
display: none;
}
<button onclick="files.click()">Select Image</button>
<input type="file" id="files">
You could do something like this... In this case, I'm not styling the input. I'm not displaying it, but applying the functionality of it to another button.
.container {
padding: 1em;
border: 1px solid lightgrey;
margin: 1em;
border-radius: 4px;
}
input[type=button] {
background-color: lightgray;
border: 0;
border-radius: 4px;
padding: .5em 2em;
}
#myFileInput {
display: none;
}
.label {
display: block;
margin-top: .5em;
}
<div class="container">
<input type="file" id="myFileInput" />
<input type="button" onclick="document.getElementById('myFileInput').click()" value="Choose file" />
<label for="myFileInput" class="label">No File Chosen</label>
</div>
I want to change the color of my checked checkbox to green.And the size should aloso change.But in my code sizes are changing but the color doesn't. I tried using :checked:after also
input[type='checkbox']{
width: 16px !important;
height: 16px !important;
border-radius: 2px;
border: 1px solid #7A7A9D;
box-sizing: border-box;
}
input[type='checkbox']:checked{
width: 100px !important;
height: 100px !important;
margin: 5px;
color: red;
}
Checkboxes are not able to be styled. You would need a third party js plugin there are many available.
If you want to do this yourself it basically involves hiding the checkbox creating an element and styling that as you want then binding its click event to two functions one to change its look and another to activate the click event of the checkbox.
The same problem will arise when trying to style that little down arrow on a drop-down select element.
Checkboxes are generally not considered stylable, but there are a lot of good ways to cheat. W3C's Custom Check Boxes and Radio Buttons is a good place to start. It also looks like a related SO Question has a number of useful links.
I would use the more advanced CSS "+" selector
Also, using !important in CSS is usually asking for trouble. there are a few rare instances where it is helpful, but overall it usually just causes trouble.
To directly answer your question:
input[type='checkbox'] {
display: none;
}
input[type='checkbox']+span::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border-radius: 2px;
border: 1px solid #7A7A9D;
box-sizing: border-box;
}
input[type='checkbox']:checked+span::before {
width: 100px;
height: 100px;
margin: 5px;
background: green;
}
<label>
<input type="checkbox">
<span>Eggs</span>
</label>
<label>
<input type="checkbox">
<span>Cheese</span>
</label>
<label class="custom-checkbox">
<input type="checkbox">
<span >Bacon</span>
</label>
You can use this trick, i hope it's can solve your problem
span {
color: grey; /* text colour before klick */
}
label > input[type="checkbox"] {
display: none;
}
label > input[type="checkbox"] + *::before {
content: "";
display: inline-block;
vertical-align: bottom;
width: 1rem;
height: 1rem;
border-radius: 10%;
border-style: solid;
border-width: 0.1rem;
border-color: gray;
}
label > input[type="checkbox"]:checked + *::before {
content: "✓"; /* you can cange check logo here */
transform: scale(0.7); /* this is for check size */
color: green; /* check colour */
text-align: center;
background: white; /* check background colour */
border-color: white; /* check border colour */
}
label > input[type="checkbox"]:checked + * {
color: green;
}
<label>
<input type="checkbox" name="key" value="value" />
<span>I am a checkbox</span>
</label>
With the new Chrome update Chrome is displaying improved default form styling.
According to the post I would say it should be possible to change this form theme to match the color set of a website.
We were going for beautiful, webby, and neutral. We hope that every design system would see a bit of themselves in the new designs and easily imagine how they might be adapted for their own branding.
I have spend the last few hours searching and trying to get rid of the default blue color that has a very bad contrast with rest of my website. Aside from using '-webkit-appearance: none;' and restyling things like checkboxes myself I'm not sure if it's possible.
Does anyone experience this issue as well or have a solution or documentation I'm missing?
My preferred solution just uses css. It targets Safari as well as Chrome, but it's already grayscale anyway, so that's OK.
input[type='checkbox']:checked {-webkit-filter: grayscale(100%);}
input[type='radio']:checked {-webkit-filter: grayscale(100%);}
This is Chrome 83 upwards specific - other browsers do other things (grayscale mostly).
This construct seems to work for now - just as long as there is a background color set for "body":
input[type=checkbox] {
mix-blend-mode: luminosity;
}
Examples:
Though I am not sure this will continue to work, it might be good enough as a temporary workaround to alleviate "designer suffering". Disrupted color schemes is a crisis :-).
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>Test</title>
<style>
body {
background-color: white;
}
input[type=checkbox] {
mix-blend-mode: luminosity;
}
</style>
</head>
<body>
<label><input type="checkbox" checked>Test</label>
</body>
</html>
Links:
https://www.w3schools.com/cssref/pr_mix-blend-mode.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
Pure CSS solution which allows any color while trying to stay close to the new design. Just replace the --primary-color variable. Works in Chromium browsers (Chrome, new Edge) and Firefox.
:root {
--primary-color: #f44336;
}
input[type="checkbox"] {
height: 14px;
width: 14px;
position: relative;
-webkit-appearance: none;
}
input[type="checkbox"]:before {
content: "";
display: inline-block;
position: absolute;
box-sizing: border-box;
height: 14px;
width: 14px;
border-radius: 2px;
border: 1px solid #767676;
background-color: #fff;
}
input[type="checkbox"]:hover::before {
border: 1px solid #4f4f4f;
}
input[type="checkbox"]:checked:hover::before {
filter: brightness(90%);
}
input[type="checkbox"]:checked:disabled:hover::before {
filter: none;
}
input[type="checkbox"]:checked:before {
content: "";
display: inline-block;
position: absolute;
box-sizing: border-box;
height: 14px;
width: 14px;
border-radius: 2px;
border: 1px solid var(--primary-color);
background-color: var(--primary-color);
}
input[type="checkbox"]:checked:after {
content: "";
display: inline-block;
position: absolute;
top: 5px;
left: 2px;
box-sizing: border-box;
height: 5px;
width: 10px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
-webkit-transform: translateY(-1.5px) rotate(-45deg);
transform: translateY(-1.5px) rotate(-45deg);
}
input[type="checkbox"]:disabled::before {
border: 1px solid #c9ced1;
border-radius: 2px;
background-color: #f0f4f8;
}
input[type="checkbox"]:checked:disabled::before {
border: 1px solid #d1d1d1;
border-radius: 2px;
background-color: #d1d1d1;
}
<input type="checkbox"></input>
<input type="checkbox" checked="checked"></input>
<input type="checkbox" disabled="true"></input>
<input type="checkbox" disabled="true" checked="checked"></input>
Using hue-rotate() filter, one can change the background color of checked checkboxes. For example, this css makes it green:
Input[type=checkbox]:checked{filter:hue-rotate(290deg);}
Now, by adding grayscale, one can make the green color darker:
Input[type=checkbox]:checked{filter:hue-rotate(290deg) grayscale(50%);}
The brightness() filter can also help to adjust the color.
Using invert(), you can get a black checkbox, then add grayscale and brightness to get white background (which looks like a regular checkbox, only, without a border):
Input[type=checkbox]:checked{filter:invert() grayscale(100%) brightness(180%);}
It's so ugly one cannot just update the style of checkboxes :( So you need to really hide native checkbox and insert your custom element using :before
Here is the snippet using Font Awesome (free icon for checkmark \f00c)
input[type="checkbox"] {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
/* Show the border to simulate the square */
border: 1px solid #ccc;
/* Hide the native checkbox */
-webkit-appearance: none;
width: 15px;
height: 15px;
}
input[type="checkbox"]:before {
/* Show some fake element to keep the space for empty "square" */
content: "\f0c8";
color: transparent;
}
input[type="checkbox"]:checked:before {
/* Show actual checkmark */
content: "\f00c";
color: black;
}
<script src="https://kit.fontawesome.com/59ba4e0c1b.js"></script>
<input type="checkbox" checked="">I'm checked
<br>
<input type="checkbox">I'm unchecked
And here is the one with pure Unicode (which still requires some polishing to avoid jumping)
input[type="checkbox"] {
/* Show the border to simulate the square */
border: 1px solid #ccc;
/* Hide the native checkbox */
-webkit-appearance: none;
width: 15px;
height: 15px;
}
input[type="checkbox"]:before {
/* Show some fake element to keep the space for empty "square" */
content: "w";
color: transparent;
}
input[type="checkbox"]:checked:before {
/* Show actual checkmark */
content: "✓";
color: black;
}
<input type="checkbox" checked="">I'm checked
<br>
<input type="checkbox">I'm unchecked
My solution to bring back the grey/black checkboxes, targeting only desktop versions of Chrome >= 83.
if (window.chrome) {
var ua = navigator.appVersion;
if (ua.indexOf('Mobile') === -1) {
var flag = ua.indexOf('Chrome/');
if (flag !== -1) {
var version = parseInt(ua.substr(flag + 7, 2));
if (version >= 83) {
var chromeStyle = document.createElement('style');
chromeStyle.type = 'text/css';
chromeStyle.innerText = 'input[type="checkbox"] {-webkit-filter: brightness(0.9);} input[type="checkbox"]:checked {-webkit-filter: grayscale(100%) invert(100%) brightness(1.3);}';
document.head.appendChild(chromeStyle);
}
}
}
}
This change in widget appearance from Chrome 81 to Chrome 83 really badly affected my Gui, in p5.js. I found a way to revert to Chrome 81 style, I don't know how long it will remain available. Put this in your Chrome address bar ..
chrome://flags/#form-controls-refresh
It brings up a bunch of internal options .. set the Web Platform Controls updated UI ie. the one you land on, to Disabled. Have to then restart the browser. This gets rid of all the "improvements", including the awful bright blue slider mentioned above.
Thanks to a Reddit poster for the info, which I've lost the URL of.
(My environment: Mac, Mojave 10.14.6, Chrome 83.0.4103.106). (Also now 83.0.4103.116, latest at 25 June 2020).
Ciao e Buona Fortuna.
In Chrome 91, maybe you can try the accent-color CSS keyword, which allows web developers to specify the accent color for UI controls (e.g. checkbox, radio button) generated by the element.
The accent-color CSS property is currently experimental. Please enable chrome://flags/#enable-experimental-web-platform-features to test it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<style>
input[type="checkbox"] {
accent-color: red;
}
</style>
<body>
<input type="checkbox" />
</body>
</html>
I thought I was going to need to use -webkit-appearance: none;, but turns out it is not necessary. Also, using JavaScript and/or filter is unnecessary.
Here is where I landed: https://codepen.io/colorful-tones/pen/NWxZpBb
Use:
input[type="checkbox"] {
-webkit-appearance: none;
}
Then just style it the way you want.
As for the checked state you can use :before pseudo element with font icon like Fontawesome or with an image like so:
input[type="checkbox"]:checked:before {
content: '';
width: 14px;
height: 14px;
position: absolute;
background: url(check.png) no-repeat center 3px transparent #ff0000;
}
I'm trying to change the color of the date picker that shows in some browsers but don't know the selector's name.
HTML:
<form action="pledge.html" method="post">
<input type="date" id="birthday" name="user_bday">
</form>
CSS:
body {
background-color: black;
}
input {
height: 45px;
width: 40%;
border-width: 3px;
border-style: solid;
border-color: white;
border-radius: 90px;
margin: 10px;
text-align: center;
font-size: 24px;
color: white;
font-weight: bold;
background-color: transparent;
outline: none;
}
input[type="date"] {
/*Something Goes Here Probably*/
}
Here's a fiddle
https://jsfiddle.net/froggomad/gznx60j1/25/
Thanks!
There are only 8 pseudo elements that are available for customization by default using webkit
::-webkit-datetime-edit
::-webkit-datetime-edit-fields-wrapper
::-webkit-datetime-edit-text
::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-day-field
::-webkit-datetime-edit-year-field
::-webkit-inner-spin-button
::-webkit-calendar-picker-indicator
and sadly, there is no cross browser way of styling a native date picker.
your selector is okay.
input[type="date"] {
/*CSS Rules*/
}
If your codes run on one browser and don't run on another browser, then you need to write Cross Browser Supported Codes with the prefix such as -webkit- , -moz- etc.
But, I will suggest you to use https://jqueryui.com/datepicker/ for flexibility and more features.
I'm referencing to some bootstrap style sheet and there's a definition for
.badge {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: middle;
background-color: #777;
border-radius: 10px;
}
.alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
I want to use this style but due to my HTML class="alert-success badge", it's overridden by the other definition
.panel-default>.panel-heading .badge {
color: #f5f5f5;
background-color: #333;
}
Now that the latter definition is more specific, it prioritize over my desired CSS. How can I resolve this?
EDIT:
There are a lot more other classes that have this issue. Is there a solution I don't need to specify them one by one?
With CSS Specificity, you should just override the more specific selector with your own.
.panel-default > .panel-heading .badge.alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
Edit: Other options can include:
Removing/Altering the offending CSS file (difficult with bootstrap, but doable, and maintenance headache if you decide to update bootstrap.css)
Update/remove offending selectors
Adding :not() selector to avoid certain scenarios
Altering your HTML Structure so that it does NOT follow the offending CSS selectors.
Changing class names and/or using new ones
Inserting/Deleting additional nested divs/elements (to avoid > direct-child selector)
Thankfully, if you have lots of classes to update, a smart regex replace is your best friend, but that's another topic.
Seems like there's no easy and elegant solution, so I just did my simple workaround. I copied out the badge css and gave it a new name to use instead of using the bootstrap badge class. Sad.
.panel-default > .panel-heading .alert-badge {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: middle;
border-radius: 10px;
}
ID selector has higher specificity priority than CLASS. If you can able to add id, it will over-ride .panel-default>.panel-heading .badge
.panel-default>.panel-heading .badge {
color: #f5f5f5;
background-color: #333;
}
#custom.badge{
background-color: #f00;
}
<div class="panel panel-default">
<div class="panel-heading">
<div class="badge">class target</div>
<div id="custom" class="anything badge">id target</div>
</div>
</div>
Here's the mozilla documentaion for specificity,
https://developer.mozilla.org/en/docs/Web/CSS/Specificity
Thanks!
You know what I'm not sure if your solution is even registering as css. I had to do this to even get a result to show. I think the CSS was just off syntax wise.
.panel-default > .panel-heading, .panel-default > .badge{
color: #f5f5f5;
background-color: #333;
}
I only noticed this because I actually tested out my code this time.