I want to style this element:
<input class="myslider" type="range" value="20">
This is working:
input[class*="myslider"] {
-webkit-appearance: none;
width: 100px;
background-color: black;
height: 2px;
}
But this is not working:
.myslider input[type=range] {
-webkit-appearance: none;
width: 100px;
background-color: black;
height: 2px;
}
Why can't I apply a class selector and an attribute selector?
The selector you're looking for is
input.myslider[type=range]
Your current code looks for children elements and doesn't target the appropriate element.
Becuase you are selecting input inside .mySlider. Try this:
.myslider[type='range'] {
-webkit-appearance: none;
width: 100px;
background-color: black;
height: 2px;
}
DEMO
Related
I have a problem with styling a button element. Here is the sample:
$clrWhite: #fff;
$clrPrimary: #3c9494;
.khanbank__button {
display: block;
height: 50px;
border: none;
color: $clrWhite;
cursor: pointer;
&--primary {
background: $clrPrimary;
&:hover {
background: darken($clrPrimary, 5%);
}
}
}
Here is the what i've tried:
Test
I see you are using BEM
The issue is on your HTML, as you need to have both classes applied to the element
<button class="khanbank__button khanbank__button--primary">Test</button>
From your Codepen, you wrote:
<button class="khanbank__button--primary">Test</button>
However, if I were to translate your SCSS into normal CSS, it would become:
:root {
--clrWhite: #fff;
--clrPrimary: #3c9494;
--clrPrimaryDarken: #358282;
}
.khanbank__button {
display: block;
height: 50px;
border: none;
color: var(--clrWhite);
cursor: pointer;
}
.khanbank__button--primary {
background: var(--clrPrimary);
}
.khanbank__button--primary:hover {
background: var(--clrPrimaryDarken);
}
<button class="khanbank__button--primary">Test</button>
Perhaps now you could see the problem.
In your HTML you have only applied .khanbank__button--primary to <button>. You need to also apply the base class .khanbank__button to it.
In short, your HTML should be:
<button class="khanbank__button khanbank__button--primary">Test</button>
See this pen for working example.
Using SCSS and have a nested element which I am trying to nest an nth-of-type() rule into but it hasn't worked anyway I type it. I want every odd el_header element to be white text and every even one to be black.
.el {
height: 500px;
width: 500px;
&_header {
height: 100%;
width: 10%;
background: #555;
display: inline-block;
line-height: 500px;
text-align: center;
&nth-of-type(odd) {
color: black;
}
&nth-of-type(even) {
color: white;
}
}
}
DEMO
You just forgot the : after &.
Use
&:nth-of-type(odd){...}
&:nth-of-type(even){...}
and it will work.
See updated fiddle
Is there a simple way to reverse the colour order when hovering?
Using this trick here I have the order right > left:
&:hover,
&:hover ~ button {
color: red
}
The fiddle with the right > left: https://jsfiddle.net/celio/Lowc1ruh/
Example with the left > right: https://css-tricks.com/examples/StarRating/
It is impossible for me to use float, position: absolute; and anything that changes the right order of my current html.
Plain CSS example:
button {
margin: 0;
padding: 5px;
border: none;
background: transparent;
display: inline-block;
}
button:before {
content: "⋆";
font-size: 5rem;
line-height: 1;
}
button:hover,
button:hover ~ button {
color: red;
}
<div class="wrapper">
<button></button>
<button id="2"></button>
<button></button>
<button></button>
<button></button>
</div>
One way would be to make all the child button elements color: red; when hovering over .wrapper. Then use the sibling selector (~) to change any elements after the currently hovered element to color: black;.
You should remove any whitespace between the elements (in this case I put them into one line in the HTML) to ensure that the cursor is always hovering over a star.
Example with plain CSS:
.wrapper button {
margin: 0;
padding: 5px;
border: none;
background: transparent;
display: inline-block;
}
.wrapper button:before {
content: "⋆";
font-size: 5rem;
line-height: 1;
}
.wrapper button:hover ~ button {
color: black;
}
.wrapper:hover button {
color: red;
}
<div class="wrapper">
<button></button><button id="2"></button><button></button><button></button><button></button>
</div>
JS Fiddle using SASS
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.
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