I have a date input that I've styled but I can't remove a blue highlight.
Here is a pen:
http://codepen.io/pjrundle/pen/PqjKBZ
<input id="selectedDate" type="date" class="date-filter pseudo-input live-update" placeholder="Event Date">
::-webkit-inner-spin-button {
display: none;
}
::-webkit-clear-button {
display: none;
-webkit-appearance: none;
}
::-webkit-calendar-picker-indicator {
opacity: 0;
height: 14px;
width: 80px;
border: 1px solid green;
z-index: 2;
position: absolute;
left: 9px;
top: 8px;
}
so when you click on the input, the first element should not go blue. Does anyone know how to do this?
The first element goes blue to indicate that it is the active element (in case you want to update the date using the keyboard), you can style it by specifying that it should not have a background using the pseudo-elements:
::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-day-field
::-webkit-datetime-edit-year-field
Notice: you should style not only the month, but all three elements (day/month/year) as you don't know which date format the user's computer will have. The code would be like this:
::-webkit-datetime-edit-month-field { background: none; }
::-webkit-datetime-edit-day-field { background: none; }
::-webkit-datetime-edit-year-field { background: none; }
And your example would look like this:
::-webkit-datetime-edit-month-field { background: none; }
::-webkit-datetime-edit-day-field { background: none; }
::-webkit-datetime-edit-year-field { background: none; }
::-webkit-inner-spin-button {
display: none;
}
::-webkit-clear-button {
display: none;
-webkit-appearance: none;
}
::-webkit-calendar-picker-indicator {
opacity: 0;
height: 14px;
width: 80px;
border: 1px solid green;
z-index: 2;
position: absolute;
left: 9px;
top: 8px;
}
<input id="selectedDate" type="date" class="date-filter pseudo-input live-update" placeholder="Event Date">
Check this question for a list of all the pseudo-elements that you can use.
Related
I want to make a range input with two handles. I have made one overlaying two inputs with type range. I use the css property pointer events to disable the track from intercepting any click meant to hit the underlying thumb. This works fine in Chrome and in Firefox. Is does not seems to pickup any pointer events in IE 11 or Edge. How do I get the -ms-thumb pseudo element to pick up the pointer events?
I have prepared a code pen to illustrate the problem. https://codepen.io/RemkoBoschker/pen/jzLgXq
The same code is included below
#mixin thumb($input-height, $input-border-radius, $input-thumb-color) {
width: $input-height;
height: $input-height;
border: none;
pointer-events: auto;
border-radius: $input-border-radius;
background-color: $input-thumb-color;
cursor: pointer;
position: relative;
z-index: 1;
}
/* https://codepen.io/rendykstan/pen/VLqZGO8 */
#mixin range-slider(
$width,
$height,
$input-top,
$input-bg-color,
$input-thumb-color,
$float: none,
$input-height: 20px,
$input-border-radius: 14px,
$bubble-width: 100px
) {
position: relative;
width: $width;
margin-left: (100% - $width) / 2;
height: $height;
float: $float;
text-align: center;
input[type='range'] {
-webkit-appearance: none;
pointer-events: none;
height: $input-height;
padding: 0;
position: absolute;
left: 0;
top: $input-top;
height: $input-height;
width: 100%;
border-radius: $input-border-radius;
border: 1px solid grey;
background: none;
&:focus,
&:active {
outline: none;
}
&::-webkit-slider-thumb {
-webkit-appearance: none;
box-sizing: content-box;
#include thumb($input-height, $input-border-radius, $input-thumb-color);
}
&::-moz-range-thumb {
#include thumb($input-height, $input-border-radius, $input-thumb-color);
}
&::-ms-thumb {
#include thumb($input-height, $input-border-radius, $input-thumb-color);
}
&::-webkit-slider-runnable-track {
/* your track styles */
}
&::-moz-range-track {
-moz-appearance: none;
background: none;
}
&::-ms-track {
/* should come after -webkit- */
border-color: transparent;
color: transparent;
background: transparent;
/* again your track styles */
}
&::-ms-fill-upper {
background: transparent;
}
&::-ms-fill-lower {
background: transparent;
}
&::-ms-tooltip {
display: none;
}
}
}
.range-slider {
#include range-slider(80%, 54px, 30px, #f1efef, green, left, 20px, 14px, 80px);
}
<div class="range-slider">
<input type="range" step="1" min="0" max="10" value=5>
<input type="range" step="1" min="0" max="10" value="3">
</div>
I have also written a cross-browser version using js.
https://codepen.io/RemkoBoschker/pen/bvaQBw
I also posted a bug report with Microsoft
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/16592591/
I have a document with notes that should display when the user hovers over the [note] indicator without disrupting the rest of the text. Here is my CSS:
.nb {
color: blue
}
.nb sup {
color: blue
}
.nb:hover sup {
cursor: alias
}
.nb:hover span.ft {
display: inline;
position: relative;
bottom: -30px;
padding: 2px;
background-color: white;
border: 2px solid black;
}
.ft {
display: none
}
<span class='sentence'>This is a lovely sentence about nothing at all<span class='nb'><sup>[a]</sup><span class='ft'>or is there more to the story?</span></span>and I like to ramble on and on, and on.</span>
<span class='sentence'>This is another nice sentence, but this one has no notes--how boring.</span>
I would like for my drop-down text to not disrupt the rest of the line it's on (or the lines below it), but I have not been successful.
.nb {
color: blue
}
.nb sup {
color: blue
}
.nb:hover sup {
cursor: alias
}
.nb:hover span.ft {
display: inline;
position: absolute;
padding: 2px;
background-color: white;
border: 2px solid black;
}
.ft {
display: none
}
<span class='sentence'>This is a lovely sentence about nothing at all<span class='nb'><sup>[a]</sup><span class='ft'>or is there more to the story?</span></span>and I like to ramble on and on, and on.</span>
<span class='sentence'>This is another nice sentence, but this one has no notes--how boring.</span>
.nb {
color: blue
}
.nb sup {
color: blue
}
.nb:hover sup {
cursor: alias
}
.nb:hover span.ft {
display : inline-block;
position : absolute;
color : black;
border : solid 1px black;
padding : 4px;
background-color : white;
}
.ft {
display: none
}
<span class='sentence'>This is a lovely sentence about nothing at all<span class='nb'><sup>[a]</sup><span class='ft'>or is there more to the story?</span></span>and I like to ramble on and on, and on.</span>
<span class='sentence'>This is another nice sentence, but this one has no notes--how boring.</span>
Use absolute CSS positioning as it will let the box behave without the others elements constraints.
.nb {
color: blue; position: relative;
}
.nb sup {
color: blue
}
.nb:hover sup {
cursor: alias
}
.nb:hover span.ft {
display: inline;
position:absolute;
bottom: -30px;
padding: 2px;
background-color: white;
border: 2px solid black;
}
.ft {
display: none; width:190px;
}
<span class='sentence'>This is a lovely sentence about nothing at all<span class='nb'><sup>[a]</sup><span class='ft'>or is there more to the story?</span></span>and I like to ramble on and on, and on.</span>
<span class='sentence'>This is another nice sentence, but this one has no notes--how boring.</span>
I have a class for a button:
.client-header button {
/*Properties*/
}
and a class to detect when the menu is open:
.client-menu-open {
/*Properties*/
}
I would like to change the button background based on whether or not the menu is open. I want something like this:
.client-header button .client-menu-open {
/*Properties*/
}
But the classes are in two different files, so it doesn't work. Is there any way to do this across different files?
Here is the code for the header index.css:
#import url('../menu/index.css');
.client-header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: var(--header-height);
overflow: hidden;
border-bottom: 1px solid #7E7E7E;
background: #cccccc;
}
.client-header button {
float: left;
height: 100%;
border: none;
border-right: 1px solid var(--border-color);
border-radius: 0;
box-shadow: none;
line-height: 39px;
background-color: #444444;
color: #FFF;
}
.client-header button:hover {
background-color: #555555;
}
.client-header button:active {
background-color: #4E4E4E;
}
.client-header-caption {
float: left;
}
.client-header-title,
.client-header-subtitle {
margin-left: 10px;
}
.client-header-title {
line-height: 25px;
}
.client-header-subtitle {
font-size: 0.5rem;
line-height: 15px;
}
#media (min-width: 640px) {
.client-header-title,
.client-header-subtitle {
display: inline-block;
line-height: var(--header-height);
}
.client-header-title {
font-size: 1.5rem;
}
.client-header-subtitle {
font-size: 1rem;
}
}
.client-header .client-menu-open button {
background: #CCCCCC;
}
And here is the code for the menu index.css:
.client-menu {
position: absolute;
top: var(--header-height);
bottom: 0;
left: -var(--menu-width);
width: var(--menu-width);
border-right: 1px solid var(--border-color);
padding-bottom: var(--menu-footer-height);
overflow: hidden;
transition: left 0.2s;
}
.client-menu-open {
left: 0;
box-shadow: 0 0 30px var(--shadow-color);
background: #444444;
}
.client-menu-pinned {
box-shadow: none;
}
.client-menu-header {
height: var(--menu-header-height);
text-align: right;
background-color: #444444;
}
.client-menu-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: var(--menu-footer-height);
text-align: right;
}
And the HTML structure is:
<header class="client-header">
<button class="client-header-menu-toggle"/>
</header>
<div class="client-menu"/>
You can use #import like so (in your primary CSS stylesheet):
#import url('external.css');
/* external.css above will be loaded */
Refer to this documentation: http://www.cssnewbie.com/css-import-rule/
Link to the other file and style .client-menu-open
if this is your html
<div class="client-menu-open"> <!-- this class is here only if the menu gets opened, else, this div has no class -->
stuff
stuff
<div class="client-header-button">
<button></button>
</div>
</div>
the correct syntax is the following
button {
background:red;
}
.client-menu-open button {
background:blue
}
The #import rule allows you to include external style sheets in your document. It is a way of creating a style sheet within your document, and then importing additional rules into the document.
To use the #import rule, type:
<style type="text/css">
#import url("import1.css");
#import url "import2.css";
</style>
For more info refer here https://developer.mozilla.org/en-US/docs/Web/CSS/#import
your CSS selector is incorrect, that's why it doesn't work. It has nothing to do with where CSS styles are defined.
.client-header button .client-menu-open will only select the following elements:
elements with class="client-menu-open"
which are children of button elements
which themselves are children of elements with class="client-header"
.
what you want, I think, is
button elements
which are children of elements having "class=client-header" AND "class=client-menu-open".
the proper selector for those elements would be .client-header.client-menu-open button.
I have written some code to help "skin" checkboxes and radio buttons using only CSS. It works very, very well ...
.... in Chrome.
However in FireFox and IE, it just ...fails outright. And I have absolutely no earthly idea why. The basic gist of it is that it loads a block using :before before the content and then places it over the default element. Of course it will be replaced with a sprite, but I have to get the outlaying behavior to function first. The code works like this; The way it is laid out in HTML is because I am using Bootstrap, and I am just adhering to the way it lays form fields out. I also have a Fiddle to demonstrate the problem.
Samples
jsBin
Includes the original LESS content.
jsFiddle
Only compiled CSS
HTML
<div class="checkbox">
<label>
<input type="checkbox" value="">
<span style="font-size: 24px;">Option</span>
</label>
</div>
LESS/CSS
.checkbox, .radio {
position: relative;
& + .checkbox {
margin-top: 10px;
&.pull-left {
left: 6px;
}
}
& + .radio {
margin-top: 10px;
left: 20px;
}
input[type="checkbox"] {
&:active, &:hover, &:focus {
&:before,
&::before {
background: yellow;
}
}
&:checked,
&:active:checked,
&:hover:checked,
&:focus:checked {
&:before, &::before {
background: green;
}
}
}
input[type="radio"] {
&:active:before,
&:hover:before,
&:focus:before {
background: yellow;
}
&:checked:before,
&:active:checked:before,
&:hover:checked:before,
&:focus:checked:before {
background: green;
}
}
input[type="radio"] {
&:before, &::before {
opacity: 1;
position: absolute;
content: "";
display: block;
background: black;
height: 24px;
width: 24px;
top: 2px;
}
}
input[type="checkbox"] {
&:before, &::before {
opacity: 1;
position: absolute;
content: "";
display: block;
background: black;
height: 24px;
width: 24px;
top: 2px;
}
}
label {
line-height: 24px;
padding-left: 10px;
}
}
Old browsers unfortunately aren't able to style radio buttons. What you should do is to use a plugin like http://fronteed.com/iCheck/ which automatically creates div based checkboxes that you can style on your own and clicking on those sync with the actual checkboxes.
I would like to customize the look of a html5 input[range] when it's vertical.
Want to avoid CSS 3 directive like transform:rotate, it complicates the UI layout then.
Webkit css properties are recognised in my context, the others vendors are useless in my case.
The customisation works good for the horizontal default slider, but not for the vertical one, you can look at here :
jsFiddle : http://jsfiddle.net/QU5VD/1/
Otherwise, here's the code :
HTML
<input type="range" class="vHorizon" />
<input type="range" class="vVertical" />
CSS
input[type="range"].vHorizon {
-webkit-appearance: none;
background-color: pink;
width: 200px;
height:10px;
}
input[type="range"].vVertical {
-webkit-appearance: slider-vertical;
background-color: pink;
width: 10px;
height:200px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: red;
width: 20px;
height: 20px;
}
******UPDATED ANSWER****
If i understand you correctly, you are trying to make you vertical look like what your horizontal looks like? if so:
input[type=range].vVertical {
-webkit-appearance: none;
background-color: green;
width: 200px;
height:10px;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
z-index: 0;
}
input[type=range].vHorizon {
-webkit-appearance: none;
background-color: pink;
height: 10px;
width:200px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: red;
width: 20px;
height: 20px;
}
fiddle <--UPDATED