I'm using the tag but in mozilla it looks like this:
but i want to make it like this:
the code im using for the lastone:
progress[value] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100px;
height: 20px;
}
Any idea how to make then the same?
progress::-moz-progress-bar { background: green; }
progress {
height: 50px;
padding: 0;
border: none;
}
Related
I want to style QScrollBar to look like this without the indicators in the end
I tried with the stylesheets:
QScrollBar::up-arrow:vertical, QScrollBar::down-vertical
{
border: none;
background: none;
color: none;
}
But this hides the indicator arrow not the 2 buttons at the end
You can use something like this:
QScrollBar:vertical {
background: #2f2f2f;
width: 15px;
margin: 0;
}
QScrollBar::handle:vertical {
background: #5b5b5b;
}
QScrollBar::add-line:vertical {
height: 0px;
}
QScrollBar::sub-line:vertical {
height: 0px;
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
height: 0px;
}
The classes you were looking for are add-line, sub-line, add-page and sub-page. Since they support the box-model, you can just set their height to 0 to make them disappear.
The code above was tested with Qt 5.9.
I'm using the element and I've found good instructions on [styling] (http://html5doctor.com/the-progress-element/).
I'd like to have more than one progress bar on a page and I'd like them to have different fill/value colors. Is this possible? Can I do this by tweaking my CSS? Or an I better off rolling my own? Thanks!
.current-roll {
-webkit-appearance: none;
width: 80%;
height: 25px;
/* next line does nothing */
color: #f7a700
}
.previous-roll {
-webkit-appearance: none;
width: 80%;
height: 25px;
/* next line does nothing */
color: #98c11e
}
progress::-webkit-progress-bar {
background: #d8d8d8;
}
progress::-webkit-progress-value {
background: #f7a700;
}
<p>Orange bar</p>
<progress class="current-roll" value="0.5"></progress>
<p>Green bar</p>
<progress class="previous-roll" value="0.75"></progress>
progress::-webkit-progress-value is what changes the progress bar color.
Example
progress.current-roll::-webkit-progress-value {
background: #f7a700;
}
You already have what you look for in the example you have given!
use progress.current-rollto style the colors specifically for .current-roll for instance
example below:
.current-roll {
-webkit-appearance: none;
width: 80%;
height: 25px;
/* next line does nothing */
color: #f7a700
}
.previous-roll {
-webkit-appearance: none;
width: 80%;
height: 25px;
/* next line does nothing */
color: #98c11e
}
progress.previous-roll::-webkit-progress-bar {
background: #d8d8d8;
}
progress.previous-roll::-webkit-progress-value {
background: #f7a700;
}
progress.current-roll::-webkit-progress-bar {
background: #ddd;
}
progress.current-roll::-webkit-progress-value {
background: red;
}
<p>Red bar</p>
<progress class="current-roll" value="0.5"></progress>
<p>Orange bar</p>
<progress class="previous-roll" value="0.75"></progress>
I want the inner element (slot in this case) to fill the button up. It works in chrome but doesn't in FireFox. I think there might be use user-agent styles in FireFox. I can't specify how wide the button is because I don't know it's size (not fixed).
jsbin link to play around:
http://jsbin.com/pucapoxizi/1/edit?html,css,output
What I've got so far:
HTML:
<button>
<slot>abc</slot>
</button>
CSS:
button {
border: 0;
padding: 0;
background: red;
}
slot {
width: 100%;
background: green;
}
Screenshots
FireFox:
Chrome:
You need to remove the extra padding for firefox button:
button::-moz-focus-inner {
padding: 0;
border: 0
}
you need to write css on top of a css reset stylesheet,for example a button reset css
button {
background: none;
border: 0;
color: inherit;
/* cursor: default; */
font: inherit;
line-height: normal;
overflow: visible;
padding: 0;
-webkit-appearance: button; /* for input */
-webkit-user-select: none; /* for button */
-moz-user-select: none;
-ms-user-select: none;
}
button::-moz-focus-inner {
border: 0;
padding: 0;
}
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