I am following this article on creating password strength meter. This is working fine in Firefox but it is not switching colors in the Chrome browser. I tried the accompanied code pen demo too and that also doesn't seem to be working in Chrome browser. Following is CSS styling for the meter element:
meter {
/* Reset the default appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0 auto 1em;
width: 100%;
height: .5em;
/* Applicable only to Firefox */
background: none;
background-color: rgba(0,0,0,0.1);
}
meter::-webkit-meter-bar {
background: none;
background-color: rgba(0,0,0,0.1);
}
meter[value="1"]::-webkit-meter-optimum-value { background: red; }
meter[value="2"]::-webkit-meter-optimum-value { background: yellow; }
meter[value="3"]::-webkit-meter-optimum-value { background: orange; }
meter[value="4"]::-webkit-meter-optimum-value { background: green; }
meter[value="1"]::-moz-meter-bar { background: red; }
meter[value="2"]::-moz-meter-bar { background: yellow; }
meter[value="3"]::-moz-meter-bar { background: orange; }
meter[value="4"]::-moz-meter-bar { background: green; }
Please suggest what might get changed in Chrome which is leading to this behaviour? I tried looking for any change in vendor prifixes but not able to find any.
There was a bug in Chrome at version 52 that caused -webkit-appearance:none; on the meter element to wipe out the coloured bar itself.
https://bugs.chromium.org/p/chromium/issues/detail?id=602928
Removing the -webkit-appearance property from the meter causes the coloured bar to show. Please see the fiddle below for an example:
https://jsfiddle.net/t58fnan9/1/
Edit:
The issue link above shows the issue as fixed. However, it has been re-opened here: https://bugs.chromium.org/p/chromium/issues/detail?id=632510
It actually shows for me perfectly.
update your browser and if you are up to date, clear your cache
Related
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;
}
So first of all, thank you for reading and helping me out.
I've spent the last 4 hours on the web searching for a solution for my strange problem.
Problem
I create a <div> with (click) action. Style it with CSS classes, :hover, :active and :focus. When I click it with mouse, everything is good. But when I touch it with a touchscreen, a oddly gray overlay appears (see the linked GIFs)!!
Behaviour when mouse-clicked
Behaviour when touched
Here is a snippet like my code:
#btn-container {
margin: 5px;
text-decoration: none;
cursor: pointer;
float: left;
border-radius: 25px;
border: none;
transition: 0.3s;
background-color: rgb(230,230,230);
color: black;
}
#btn-container:hover {
background-color: rgb( 200,200,200 );
}
#btn-container:active {
background-color: rgb( 150,150,150 );
transition: 0s;
}
#btn-container:focus {
outline: 0;
}
.standard-btn {
padding: 12px 20px;
display: inline-block;
}
html {
/* Prevent user to select text */
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer, Edge */
user-select: none; /* Non prefixed version: Chrome, Opera */
}
<div id="btn-container" class="standard-btn">Touch me</div>
PS: I'm developing in Angular. I've tested this strange behaviour on Chrome for Android, Safari on iOS, Chrome, Edge, IE on Windows.
The oddity is that, for example, on JSFiddle (here) or here on StackOverflow this doesn't happen. And it doesn't happen also on another Angular app of mine.... and I wasn't able to find out WHY, CSS/HTML/JS are exactly the same between the two apps. That's crazy.
Ok, solved. I'll post here the solution for future reference.
I just needed to add the property -webkit-tap-highlight-color: transparent on the main button class. As it is here described, this is not a standard property. But it worked!
Referencing to the code snippet from the question, I've modified the #btn-container class, in this way:
#btn-container {
margin: 5px;
text-decoration: none;
cursor: pointer;
float: left;
border-radius: 25px;
border: none;
transition: 0.3s;
background-color: rgb(230,230,230);
color: black;
-webkit-tap-highlight-color: transparent; /* <-- this is new */
}
I need to reduce the scroll bar width in my web page but not for the whole page. I am using one splitter and a grid in that page if height exceeds scrollbar occurs. How can I reduce the width of it. I have used the following styles
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
But these styles are applying for the whole page. Can anyone suggest me to resolve this issue?
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
More information: https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp
One option would be to use a class for parts of the webpage where you want to customize the scroll bar. For that class, let us say class='customScroll', you could define your css code:
.cuctomScroll {
overflow: scroll;
scrollbar-width: 20px; */for Mozilla support/*
}
.customScroll::-webkit-scrollbar {
width: 20px; */for Chrome and IE support/*
}
Edit 1: Here is the working example: https://jsfiddle.net/43o50m6a/6/.
Please feel free to ask any further clarifications.
I'm using the following code to customize my select dropdown arrow:
HTML:
<span class="selectWrapper">
<select id="rowselect" class="pageinfoselect input-mini">
<option>...</option>
</select>
</span>
CSS:
span.selectWrapper {
position: relative;
display: inline-block;
width:65px;
}
span.selectWrapper select {
display: inline-block;
padding: 4px 3px 3px 5px;
margin: 0;
font: inherit;
outline:none; /* remove focus ring from Webkit */
line-height: 1.2;
background: #f5f5f5;
height:30px;
color:#666666;
border:1px solid #dddddd;
}
/* Select arrow styling */
span.selectWrapper:after {
content: url("../images/arrow_down.png");
position: absolute;
top: 0;
right: 0;
bottom: 0;
line-height: 30px;
padding: 0 7px;
background: #f5f5f5;
color: white;
border:1px solid #dddddd;
border-left:0px;
}
This works fine and replaces the default dropdown arrow but the problem is that the arrow image is not clickable. If I click on the select box it opens but I want it to open when I click the arrow image as well
Add the following rule
pointer-events:none;
EDIT:
It should be noted though that IE doesn't yet support this property (Although according to caniuse - It will be supported in IE11)
BUT, If you still want to this method you can use Modernizer or conditional comments (For IE < 10) and this css hack (for IE10) to make IE revert to the standard built in arrow.
/*target Internet Explorer 9 and Internet Explorer 10:*/
#media screen and (min-width:0\0) {
span.selectWrapper:after
{
display:none;
}
}
There is however a workaround (and also a different solution) for this, which I mention in my answer here - which also contains this Codepen
How can I drop the CSS property ::-webkit-scrollbar from a single HTML element?
In my CSS file, I have this code:
::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color:transparent;
}
::-webkit-scrollbar-track {
background-color:transparent;
width: 6px;
}
::-webkit-scrollbar-track-piece {
background-color: blue;
}
::-webkit-scrollbar-thumb {
background-color: #d4dee8;
width: 6px;
}
It will replace every scrollbar with webkit scrollbars. But there are two places where I don't need webkit scrollbar, I need normal scrollbars instead.
HTML file:
<td class="viewDialogLabel" height="21" style="width:156px;padding:0px">
<!-- Inner elements --->
</td>
Here, I need to change class viewDialogLabel to normal scrollbars.
How do I get this effect?
WebKit supports the handy CSS value initial, which sets properties back to the values they would have had if no styles applied to the page.
So, you can reset the ::-webkit-scrollbar values you’ve set like this:
.viewDialogLabel::-webkit-scrollbar {
width: initial;
height: initial;
background-color:initial;
}
.viewDialogLabel::-webkit-scrollbar-track {
background-color:initial;
width: initial;
}
.viewDialogLabel::-webkit-scrollbar-track-piece {
background-color: initial;
}
.viewDialogLabel::-webkit-scrollbar-thumb {
background-color: initial;
width: initial;
}
See http://jsfiddle.net/uVGKr/
WebKit also supports the :not() selector, so I would have thought the following amendment to your original CSS would prevent the custom scrollbars from applying to that table cell:
:not(.viewDialogLabel)::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color:transparent;
}
:not(.viewDialogLabel)::-webkit-scrollbar-track {
background-color:transparent;
width: 6px;
}
:not(.viewDialogLabel)::-webkit-scrollbar-track-piece {
background-color: blue;
}
:not(.viewDialogLabel)::-webkit-scrollbar-thumb {
background-color: #d4dee8;
width: 6px;
}
However, it doesn’t work for me in Chrome 16 — the custom scrollbar styles aren’t applied at all (see http://jsfiddle.net/uVGKr/1/). I’m not sure if I’m doing something wrong, if you just can’t combine these selectors, or if this is a WebKit bug.
As per your suggested edit removing the td selectors from the CSS, this seems to be working in Chrome 24 at least: http://jsfiddle.net/uVGKr/2/
You can specify a more accurate selector:
.new-scrollbar::-webkit-scrollbar {
/* ... */
}
Then, only elements with the class new-scrollbar will have the custom scrollbars.
Or you can try to override the properties in specific elements:
.old-scrollbar::-webkit-scrollbar {
background: none;
}
.old-scrollbar::-webkit-scrollbar-track {
background: none;
}
/* ... */
Also try it with different properties / values.
Instead of removing these properties from those two elements you can specify a separate class or ids for these two elements and override the -webkit-scrollbar styles with new ones