I am really stoked about the HTML5 date picker.
The caveat is that I don't see or foresee much in the way of applying colors to the picker itself which is going to make the use of the datepicker kind of a deal-breaker on most sites. The <select> suffers from widespread JavaScript-replacement hacks for the simple reason that people can't make it pretty.
So are there any known styling options for the HTML input of type='date'?
The following eight pseudo-elements are made available by WebKit for customizing a date input’s textbox:
::-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
So if you thought the date input could use more spacing and a ridiculous color scheme you could add the following:
::-webkit-datetime-edit { padding: 1em; }
::-webkit-datetime-edit-fields-wrapper { background: silver; }
::-webkit-datetime-edit-text { color: red; padding: 0 0.3em; }
::-webkit-datetime-edit-month-field { color: blue; }
::-webkit-datetime-edit-day-field { color: green; }
::-webkit-datetime-edit-year-field { color: purple; }
::-webkit-inner-spin-button { display: none; }
::-webkit-calendar-picker-indicator { background: orange; }
<input type="date">
Currently, there is no cross browser, script-free way of styling a native date picker.
As for what's going on inside WHATWG/W3C...
If this functionality does emerge, it will likely be under the CSS-UI standard or some Shadow DOM-related standard. The CSS4-UI wiki page lists a few appearance-related things that were dropped from CSS3-UI, but to be honest, there doesn't seem to be a great deal of interest in the CSS-UI module.
I think your best bet for cross browser development right now, is to implement pretty controls with JavaScript based interface, and then disable the HTML5 native UI and replace it. I think in the future, maybe there will be better native control styling, but perhaps more likely will be the ability to swap out a native control for your own Shadow DOM "widget".
It is annoying that this isn't available, and petitioning for standard support is always worthwhile. Though it does seem like jQuery UI's lead has tried and was unsuccessful.
While this is all very discouraging, it's also worth considering the advantages of the HTML5 date picker, and also why custom styles are difficult and perhaps should be avoided. On some platforms, the datepicker looks extremely different and I personally can't think of any generic way of styling the native datepicker.
FYI, I needed to update the color of the calendar icon which didn't seem possible with properties like color, fill, etc.
I did eventually figure out that some filter properties will adjust the icon so while i did not end up figuring out how to make it any color, luckily all I needed was to make it so the icon was visible on a dark background so I was able to do the following:
body { background: black; }
input[type="date"] {
background: transparent;
color: white;
}
input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(100%);
}
<body>
<input type="date" />
</body>
Hopefully this helps some people as for the most part chrome even directly says this is impossible.
found this on Zurb Foundation's GitHub
In case you want to do some more custom styling. Here's all the
default CSS for webkit rendering of the date components.
input[type="date"] {
-webkit-align-items: center;
display: -webkit-inline-flex;
font-family: monospace;
overflow: hidden;
padding: 0;
-webkit-padding-start: 1px;
}
input::-webkit-datetime-edit {
-webkit-flex: 1;
-webkit-user-modify: read-only !important;
display: inline-block;
min-width: 0;
overflow: hidden;
}
input::-webkit-datetime-edit-fields-wrapper {
-webkit-user-modify: read-only !important;
display: inline-block;
padding: 1px 0;
white-space: pre;
}
I used a combination of the above solutions and some trial and error to come to this solution.
I am using styled-components to render a transparent date picker input as shown in the image below:
const StyledInput = styled.input`
appearance: none;
box-sizing: border-box;
border: 1px solid black;
background: transparent;
font-size: 1.5rem;
padding: 8px;
::-webkit-datetime-edit-text { padding: 0 2rem; }
::-webkit-datetime-edit-month-field { text-transform: uppercase; }
::-webkit-datetime-edit-day-field { text-transform: uppercase; }
::-webkit-datetime-edit-year-field { text-transform: uppercase; }
::-webkit-inner-spin-button { display: none; }
::-webkit-calendar-picker-indicator { background: transparent;}
`
You can use the following CSS to style the input element.
input[type="date"] {
background-color: red;
outline: none;
}
input[type="date"]::-webkit-clear-button {
font-size: 18px;
height: 30px;
position: relative;
}
input[type="date"]::-webkit-inner-spin-button {
height: 28px;
}
input[type="date"]::-webkit-calendar-picker-indicator {
font-size: 15px;
}
<input type="date" value="From" name="from" placeholder="From" required="" />
Related
i create a css file with styled-components for my callcomposite, but when i deployed my application, some os these css properties, dont work.
how can i add a property css to my callcomposite inside components, like controlbar, video, buttons, etc... without losing it?
and the second, question, how can i customize background from this callcomposite root?
<Container>
<CallComposite adapter={callAdapter} />
</Container>
in my container, i have some css using styled components.
export const Container = styled.div`
height: 100vh;
.ms-Dropdown-title {
background: #ffffff;
border-radius: 5px;
border: none;
font-family: "Poppins", sans-serif !important;
font-size: 11px;
}
.ms-Stack .css-131 .ui-icon {
color: black;
}
.ui-icon {
color: black;
}
.ms-Button--primary {
width: 364px;
height: 54px;
border: none;
background: #28dc8e;
border-radius: 8px;
filter: drop-shadow(5px 4px 10px rgba(0, 0, 0, 0.25)) !important;
}
.ms-Dropdown-label {
font-family: "Poppins", sans-serif !important;
color: white;
}
`;
At this time we only expose styles at the component layer through fluent-style styling. Currently in design we are exploring the use of design tokens, css-like variables oriented towards user facing naming conventions than css terms that a web developer would better understand.
Please come and share your issue on our github issues at
https://github.com/Azure/communication-ui-library/issues and we can see if we can help you out.
I'm trying to find a source explaining how to fully style the input type "time". I cannot find a single example explaining all of the style attributes!
Only one I've found is:
input[type="time"]{
/**style goes here **/
}
Which doesn't help much..
Tried this:
input[type="time"]::-webkit-inner-spin-button {
-webkit-appearance: none;
cursor:pointer;
display: block;
width:20px;
color: red;
text-align:center;
position:relative;
}
Spinner does not turn red for example.
I made some progress styling the input in Chrome/webkit, but I can't figure out how to style anything in Firefox. Here's a demo that I put together on Codepen.
input[type=time] {
border: none;
color: #2a2c2d;
font-size: 14px;
font-family: helvetica;
width: 180px;
}
/* Wrapper around the hour, minute, second, and am/pm fields as well as
the up and down buttons and the 'X' button */
input[type=time]::-webkit-datetime-edit-fields-wrapper {
display: flex;
}
/* The space between the fields - between hour and minute, the minute and
second, second and am/pm */
input[type=time]::-webkit-datetime-edit-text {
padding: 19px 4px;
}
/* The naming convention for the hour, minute, second, and am/pm field is
`-webkit-datetime-edit-{field}-field` */
/* Hour */
input[type=time]::-webkit-datetime-edit-hour-field {
background-color: #f2f4f5;
border-radius: 15%;
padding: 19px 13px;
}
/* Minute */
input[type=time]::-webkit-datetime-edit-minute-field {
background-color: #f2f4f5;
border-radius: 15%;
padding: 19px 13px;
}
/* AM/PM */
input[type=time]::-webkit-datetime-edit-ampm-field {
background-color: #7155d3;
border-radius: 15%;
color: #fff;
padding: 19px 13px;
}
/* 'X' button for resetting/clearing time */
input[type=time]::-webkit-clear-button {
display: none;
}
/* Up/Down arrows for incrementing/decrementing the value */
input[type=time]::-webkit-inner-spin-button {
display: none;
}
<input type="time" value="13:30"/>
I wasn't able to find documentation anywhere. I got this far by inspecting the input's internal DOM, hovering over each element in devTools to see what portion of the UI it corresponded to, then grabbed its pseudo attribute.
If you can't currently see the internal DOM, you'll have to expose it by going into Chrome's DevTools Settings, Preferences, Elements and make sure the "Show user agent shadow DOM" option is enabled.
There's another pseudo element: -webkit-calendar-picker-indicator - the clock that shows up in chrome to allow you picking time using a mouse.
input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg);
}
<input type="time">
To style the input type date and time - use the following css -
[type="date"] {
background:transparent url(/assets/images/calendar.png) 97% 50% no-repeat !important;
}
[type="date"]::-webkit-inner-spin-button {
display: none;
}
[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0;
}
[type="time"] {
background:transparent url(/assets/images/clock.png) 97% 50% no-repeat !important;
}
[type="time"]::-webkit-inner-spin-button {
display: none;
}
[type="time"]::-webkit-calendar-picker-indicator {
opacity: 0;
}
I am really stoked about the HTML5 date picker.
The caveat is that I don't see or foresee much in the way of applying colors to the picker itself which is going to make the use of the datepicker kind of a deal-breaker on most sites. The <select> suffers from widespread JavaScript-replacement hacks for the simple reason that people can't make it pretty.
So are there any known styling options for the HTML input of type='date'?
The following eight pseudo-elements are made available by WebKit for customizing a date input’s textbox:
::-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
So if you thought the date input could use more spacing and a ridiculous color scheme you could add the following:
::-webkit-datetime-edit { padding: 1em; }
::-webkit-datetime-edit-fields-wrapper { background: silver; }
::-webkit-datetime-edit-text { color: red; padding: 0 0.3em; }
::-webkit-datetime-edit-month-field { color: blue; }
::-webkit-datetime-edit-day-field { color: green; }
::-webkit-datetime-edit-year-field { color: purple; }
::-webkit-inner-spin-button { display: none; }
::-webkit-calendar-picker-indicator { background: orange; }
<input type="date">
Currently, there is no cross browser, script-free way of styling a native date picker.
As for what's going on inside WHATWG/W3C...
If this functionality does emerge, it will likely be under the CSS-UI standard or some Shadow DOM-related standard. The CSS4-UI wiki page lists a few appearance-related things that were dropped from CSS3-UI, but to be honest, there doesn't seem to be a great deal of interest in the CSS-UI module.
I think your best bet for cross browser development right now, is to implement pretty controls with JavaScript based interface, and then disable the HTML5 native UI and replace it. I think in the future, maybe there will be better native control styling, but perhaps more likely will be the ability to swap out a native control for your own Shadow DOM "widget".
It is annoying that this isn't available, and petitioning for standard support is always worthwhile. Though it does seem like jQuery UI's lead has tried and was unsuccessful.
While this is all very discouraging, it's also worth considering the advantages of the HTML5 date picker, and also why custom styles are difficult and perhaps should be avoided. On some platforms, the datepicker looks extremely different and I personally can't think of any generic way of styling the native datepicker.
FYI, I needed to update the color of the calendar icon which didn't seem possible with properties like color, fill, etc.
I did eventually figure out that some filter properties will adjust the icon so while i did not end up figuring out how to make it any color, luckily all I needed was to make it so the icon was visible on a dark background so I was able to do the following:
body { background: black; }
input[type="date"] {
background: transparent;
color: white;
}
input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(100%);
}
<body>
<input type="date" />
</body>
Hopefully this helps some people as for the most part chrome even directly says this is impossible.
found this on Zurb Foundation's GitHub
In case you want to do some more custom styling. Here's all the
default CSS for webkit rendering of the date components.
input[type="date"] {
-webkit-align-items: center;
display: -webkit-inline-flex;
font-family: monospace;
overflow: hidden;
padding: 0;
-webkit-padding-start: 1px;
}
input::-webkit-datetime-edit {
-webkit-flex: 1;
-webkit-user-modify: read-only !important;
display: inline-block;
min-width: 0;
overflow: hidden;
}
input::-webkit-datetime-edit-fields-wrapper {
-webkit-user-modify: read-only !important;
display: inline-block;
padding: 1px 0;
white-space: pre;
}
I used a combination of the above solutions and some trial and error to come to this solution.
I am using styled-components to render a transparent date picker input as shown in the image below:
const StyledInput = styled.input`
appearance: none;
box-sizing: border-box;
border: 1px solid black;
background: transparent;
font-size: 1.5rem;
padding: 8px;
::-webkit-datetime-edit-text { padding: 0 2rem; }
::-webkit-datetime-edit-month-field { text-transform: uppercase; }
::-webkit-datetime-edit-day-field { text-transform: uppercase; }
::-webkit-datetime-edit-year-field { text-transform: uppercase; }
::-webkit-inner-spin-button { display: none; }
::-webkit-calendar-picker-indicator { background: transparent;}
`
You can use the following CSS to style the input element.
input[type="date"] {
background-color: red;
outline: none;
}
input[type="date"]::-webkit-clear-button {
font-size: 18px;
height: 30px;
position: relative;
}
input[type="date"]::-webkit-inner-spin-button {
height: 28px;
}
input[type="date"]::-webkit-calendar-picker-indicator {
font-size: 15px;
}
<input type="date" value="From" name="from" placeholder="From" required="" />
When using "disabled" on the textarea it changes its text-color and other attributes, how can I maintain the style of the textarea without having to write the same css inside textarea:disabled ? I only want to avoid providing inputs
input, textarea {
outline: none;
border: none;
display: block;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
font-family: $ptsans;
font-size: rem(16);
color: $text-color;
#include placeholder {
color: $placeholder;
}
background-color: #fff !important;
}
p {
line-height: rem(21);
}
textarea {
width: 100%;
resize: none;
background-color:transparent!important;
&.editable {
width:97%;
padding:10px;
background-color:#fff!important;
height:80px;
border-color:#ced2db ;
border-radius: 3px;
border-style: solid;
border-width: 1px;
}
}
textarea:disabled {
//Should I write all same styles here again?
}
Since you are using a preprocessor to make final CSS there is an option to use "mixin" / "extend" - proper use depends on case. Please check docs. Plain old CSS selectors grouping can be also in handy, like that:
textarea, textarea: disabled {
width: 100%;
resize: none;
/* other properties here... */
}
how can I make a custom checkbox with css only (no JS no JQ) with content:"on" when checked and content:"off" when uncheked.
Thanks.
reedit
OK, after LOT of copy/paste/delete, it work now.
Thank.
input[type=checkbox] {
position: relative;
visibility: hidden;
cursor: pointer;
}
input[type=checkbox]:after {
display: block;
content: "OFF";
position: absolute;
top: 0;
right: -30px;
visibility: visible;
height: 30px;
line-height: 30px;
width: 50px;
text-align: center;
border-radius: 4px;
background: #d00;
color: #fff;
font-weight: 600;
cursor: pointer;
}
input[type=checkbox]:checked:after {
content: "ON";
background: #0a0;
}
<input type="checkbox" />
It is possible. Check out these blog posts by Ryan Seddon. He explain how you can play with checkbox and CSS
http://www.thecssninja.com/css/custom-inputs-using-css
http://www.thecssninja.com/css/futurebox3
http://www.thecssninja.com/css/css-tree-menu
Creating an actual element with CSS isn't possible. You can however style a checkbox using css.
An example:
input[type=checkbox] {
outline: 2px solid #f00;
}
Relying on pure CSS is also a give-or-take when dealing with different browsers and platforms. I hope this answers your question.
I believe this is impossible with just css. Css decorates a html element and does not change its properties. If you click the checkbox, the box will have to do a postback to show it on the page. In which case the css will be the same. You need javascript.
What makes you not want to use javascript?