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.
Related
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 have css implementation for <input type="file"> which styles the button and this is my code:
::-webkit-file-upload-button {
cursor: pointer;
margin-top: 25px;
display: inline-block;
padding: 6px;
padding-right: 29px;
padding-left: 29px;
transition: all 1s ease;
color: #darkGray;
text-transform: capitalize;
font-size: 15px;
z-index: 1;
position: relative;
border-radius: 25px;
background-color: transparent;
border: 2px solid #red;
}
But this only works on Chrome and I would like to know how would I do it for other browsers?
There's a standard ::file-selector-button pseudo-element now, see https://github.com/w3c/csswg-drafts/issues/5049. Firefox supports it, and future versions of Safari and Chrome will too.
Here is how you can implement custom styling for the "file" input type: https://css-tricks.com/snippets/css/custom-file-input-styling-webkitblink/
Most people tell you to completely do away with the button stuff and use another button to engage the click(); function on the file chooser.
But that may soon be outdated wizardry, as you found out. The equivalent of what you are doing on IE (v10 and above) starts this way:
input[type="file"]::-ms-browse {
background-color: #ffffff00;
margin: 0px;
padding: 0px;
border: 0px;
}
input[type="file"]::-webkit-file-upload-button {
background-color: #ffffff00;
margin: 0px;
padding: 0px;
border: 0px;
}
<input type="file"/>
There are two most important reasons why you should continue to go with your direction
Less hackery, why make it hard if you can do it simpler nowadays?
On Chrome and FF, the file chooser becomes automatically a drop target, that adds huge usability value.
Now I am still researching how I can make the button 3d shading go away, so I can make the button invisible and leave only the simple drop target field.
Styling file inputs is notoriously difficult, as most browsers will not change the appearance from either css or javascript.
You can pass through click events from labels and style the label in whichever way you want.
<label id="add-computer-button" for="fileupload">Add from computer
<input id="fileupload" type="file" multiple="multiple" name="_photos" accept="image/*" style="visibility: hidden">
Here is the demo: https://jsfiddle.net/dinesh_feder/jww69rnf/
I have a lot of forms on my website with, of course, many of the fields in them being required. If required field is left empty, it is assigned an 'error' class and I'm trying to circle the field in red regardless whether it is a text field, drop down menu or a checkbox.
I have the following code in my css file:
.error input, .error select, .error textarea {
border-style: solid;
border-color: #c00;
border-width: 2px;
}
Now strangely enough that works well in IE but in Chrome the checkboxes are not circled in red although I can see that the CSS is applied to them when inspecting the element.
And this might be irrelevant at the css code above is active but I do have something else in my css file:
input[type=checkbox] {
background:transparent;
border:0;
margin-top: 2px;
}
And that is used so that the checkboxes are displayed correctly in IE8 and less.
Any ideas how I can visualize the red border in Chrome?
EDIT:
Here's a jsfiddle:
http://jsfiddle.net/PCD6f/3/
Just do it like so (your selectors were wrong: .error input, .error select, .error textarea):
input[type=checkbox] {
outline: 2px solid #F00;
}
Here's the jsFiddle
Specifically for a checkbox use outline: 2px solid #F00;, BUT keep in mind that the border will still be visible. Styling input fields to look them well across multiple browsers is tricky and unreliable.
For a completely custom styled checkbox, see this jsFiddle from this Gist.
EDIT Play with: outline-offset: 10px;
Check Box, and Radio Button CSS Styling Border without any image or content. Just pure css.
JSFiddle Link here
input[type="radio"]:checked:before {
display: block;
height: 0.4em;
width: 0.4em;
position: relative;
left: 0.4em;
top: 0.4em;
background: #fff;
border-radius: 100%;
content: '';
}
/* checkbox checked */
input[type="checkbox"]:checked:before {
content: '';
display: block;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-left: 4px;
margin-top: 1px;
}
Works for me.only outline doesn't work.
input[type=checkbox].has-error{
outline: 1px solid red !important;
}
I need to make a button look like a link using CSS. The changes are done but when I click on it, it shows as if it's pushed as in a button. Any idea how to remove that, so that the button works as a link even when clicked?
button {
background: none!important;
border: none;
padding: 0!important;
/*optional*/
font-family: arial, sans-serif;
/*input has OS specific font-family*/
color: #069;
text-decoration: underline;
cursor: pointer;
}
<button> your button that looks like a link</button>
If you don't mind using twitter bootstrap I suggest you simply use the link class.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<button type="button" class="btn btn-link">Link</button>
The code of the accepted answer works for most cases, but to get a button that really behaves like a link you need a bit more code. It is especially tricky to get the styling of focused buttons right on Firefox (Mozilla).
The following CSS ensures that anchors and buttons have the same CSS properties and behave the same on all common browsers:
button {
align-items: normal;
background-color: rgba(0,0,0,0);
border-color: rgb(0, 0, 238);
border-style: none;
box-sizing: content-box;
color: rgb(0, 0, 238);
cursor: pointer;
display: inline;
font: inherit;
height: auto;
padding: 0;
perspective-origin: 0 0;
text-align: start;
text-decoration: underline;
transform-origin: 0 0;
width: auto;
-moz-appearance: none;
-webkit-logical-height: 1em; /* Chrome ignores auto, so we have to use this hack to set the correct height */
-webkit-logical-width: auto; /* Chrome ignores auto, but here for completeness */
}
/* Mozilla uses a pseudo-element to show focus on buttons, */
/* but anchors are highlighted via the focus pseudo-class. */
#supports (-moz-appearance:none) { /* Mozilla-only */
button::-moz-focus-inner { /* reset any predefined properties */
border: none;
padding: 0;
}
button:focus { /* add outline to focus pseudo-class */
outline-style: dotted;
outline-width: 1px;
}
}
The example above only modifies button elements to improve readability, but it can easily be extended to modify input[type="button"], input[type="submit"] and input[type="reset"] elements as well. You could also use a class, if you want to make only certain buttons look like anchors.
See this JSFiddle for a live-demo.
Please also note that this applies the default anchor-styling to buttons (e.g. blue text-color). So if you want to change the text-color or anything else of anchors & buttons, you should do this after the CSS above.
The original code (see snippet) in this answer was completely different and incomplete.
/* Obsolete code! Please use the code of the updated answer. */
input[type="button"], input[type="button"]:focus, input[type="button"]:active,
button, button:focus, button:active {
/* Remove all decorations to look like normal text */
background: none;
border: none;
display: inline;
font: inherit;
margin: 0;
padding: 0;
outline: none;
outline-offset: 0;
/* Additional styles to look like a link */
color: blue;
cursor: pointer;
text-decoration: underline;
}
/* Remove extra space inside buttons in Firefox */
input[type="button"]::-moz-focus-inner,
button::-moz-focus-inner {
border: none;
padding: 0;
}
try using the css pseudoclass :focus
input[type="button"], input[type="button"]:focus {
/* your style goes here */
}
edit as for links and onclick events use (you shouldn’t use inline javascript eventhandlers, but for the sake of simplicity i will use them here):
watch and learn
with this.href you can even access the target of the link in your function. return false will just prevent browsers from following the link when clicked.
if javascript is disabled the link will work as a normal link and just load some/page.php—if you want your link to be dead when js is disabled use href="#"
You can't style buttons as links reliably throughout browsers. I've tried it, but there's always some weird padding, margin or font issues in some browser. Either live with letting the button look like a button, or use onClick and preventDefault on a link.
You can achieve this using simple css as shown in below example
button {
overflow: visible;
width: auto;
}
button.link {
font-family: "Verdana" sans-serif;
font-size: 1em;
text-align: left;
color: blue;
background: none;
margin: 0;
padding: 0;
border: none;
cursor: pointer;
-moz-user-select: text;
/* override all your button styles here if there are any others */
}
button.link span {
text-decoration: underline;
}
button.link:hover span,
button.link:focus span {
color: black;
}
<button type="submit" class="link"><span>Button as Link</span></button>
I think this is very easy to do with very few lines. here is my solution
.buttonToLink{
background: none;
border: none;
color: red
}
.buttonToLink:hover{
background: none;
text-decoration: underline;
}
<button class="buttonToLink">A simple link button</button>
button {
text-decoration: underline;
cursor: pointer;
}
<button onClick="javascript:window.location.href='link'">Domain</button>
I have a problem with css and FF3 / IE7 and Opera 10.
I have one input[type="submit"] and one anchor and I want to style them the same. No matter what I try the only logical browser seems to be Opera 10 (it styles them the same with the same css).
FF seems to have different padding (I would need to have the submit box 1px smaller in padding to fit but that would throw Opera 10 off) and IE7 is just way off.
code for you code lovers:
<form action="/login" method="post" id="loginform">
<fieldset>
<input type="submit" value="Login" />
Register
Lost Password?
</fieldset>
</form>
css:
fieldset a {
color: #ffcc00;
border: 1px solid #707070;
background: #000000;
font-size: 10px;
font-weight: normal;
padding: 2px;
/*vertical-align: text-top;*/
}
fieldset a:hover {
color: #ffcc00;
border: 1px solid #707070;
background: #333333;
cursor: pointer;
font-size: 10px;
font-weight: normal;
text-decoration: none;
padding: 2px;
}
fieldset input[type="submit"] {
color: #ffcc00;
padding: 2px;
border: 1px solid #707070;
background: #000000;
font-size: 10px;
font-weight: normal;
}
fieldset input[type="submit"]:hover {
color: #ffcc00;
padding: 2px;
border: 1px solid #707070;
background: #333333;
cursor: pointer;
font-size: 10px;
font-weight: normal;
}
any help to solve the issue of alignment between browsers is desired as I need to support all three (safari too but I think if I get these 3 aligned it should work there too).
Many thanks in advance (p.s I'm going on lunch now and will check answers right after so sorry for the slow replies in advance)
The Firefox problem is solved like this
button::-moz-focus-inner {
border: 0;
padding: 0;
}
Try this in isolation. I recommend using a reset.css file to force all browsers to treat apples as apples, and then styling your INPUT and A elements accordingly.
It's possible that other CSS rules are coming into the mix.
See http://meyerweb.com/eric/tools/css/reset/ for a reset file.
I've had issues with the past with IE and styling certain elements (specifically disabled elements), and how IE differs in its handling of this styling between versions 6 and 7.
The following DOCTYPE seemed to help in those circumstances, but rendering in IE 6 may no longer work as expected:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">