In console if I see, following classes are present:
html.sap-desktop ::-webkit-scrollbar {
width: 16px;
height: 16px;
background-color: #f7f7f7;
}
html.sap-desktop ::-webkit-scrollbar-corner {
background-color: #f7f7f7;
}
html.sap-desktop ::-webkit-scrollbar-thumb {
background-color: #e6e6e6;
}
I wanted to give blue color to scroll bar and change width. So this is what I did. Please tell if good idea, if not what other ways can be used.
.sapUiBody .sapMPageEnableScrolling::-webkit-scrollbar {
width: 6px;
}
.sapUiBody .sapMPageEnableScrolling::-webkit-scrollbar-track {
background-color: #ffffff;
border-radius: 5px;
}
.sapUiBody .sapMPageEnableScrolling::-webkit-scrollbar-thumb {
background-color: #005daa;
height: 3px !important;
}
One more issue I am facing is, when I hover over my scrollbar, it becomes grey.
Add the below CSS in your style sheet and update your colors
.sap-desktop ::-webkit-scrollbar {
width: 16px !important;
}
.sap-desktop ::-webkit-scrollbar-thumb {
background-color: #005483 !important;/* Update color */
}
.sap-desktop ::-webkit-scrollbar-thumb:hover { /* Scrollbar hover */
background-color: #d14900 !important; /* Update hover color */
}
Firt of all it is not a good idea to modify css classess directly..this will change all the instance of say scrollbar in your app...give a css class to parent and then modify the css
e.g
.parentCssClass .sap-desktop ::-webkit-scrollbar {
width: 16px !important;
}
I just finished with the Sass guide.
The guide explains mixins:
..A mixin lets you make groups of CSS declarations that you want to
reuse throughout your site. You can even pass in values to make your
mixin more flexible.
and extend:
.. This is one of the most useful features of Sass. Using #extend lets
you share a set of CSS properties from one selector to another ..
It looks like 'extend' may be implemented in 'mixin' (it seems 'mixin' is extend of 'extend' :-) ).
// #extend
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
#extend .message;
border-color: green;
}
.error {
#extend .message;
border-color: red;
}
.warning {
#extend .message;
border-color: yellow;
}
// #mixin
#mixin message($color) {
border: 1px solid #ccc;
padding: 10px;
color: #333;
border-color: $color;
}
.success { #include message(green); }
.error { #include message(red); }
.warning { #include message(yellow); }
and even more because mixins have params.
But on the other hand the processed CSS is not exactly the same. But it will be same style effect on the DOM.
/* extend processed */
.message, .success, .error, .warning {
border: 1px solid #ccc;
padding: 10px;
color: #333; }
.success {
border-color: green; }
.error {
border-color: red; }
.warning {
border-color: yellow; }
/* mixin processed */
.success {
border: 1px solid #ccc;
padding: 10px;
color: #333;
border-color: green; }
.error {
border: 1px solid #ccc;
padding: 10px;
color: #333;
border-color: red; }
.warning {
border: 1px solid #ccc;
padding: 10px;
color: #333;
border-color: yellow; }
My question is how do these features differ?
When should I use one over the other?
From http://blog.nakulrajput.com/mixins-extends-and-placeholders/:
#mixin
Here is how mixins work. Definition and usage:
#mixin awesome {
width: 100%;
height: 100%;
}
body {
#include awesome;
}
p {
#include awesome;
}
The snippets above produce the following CSS:
body {
width: 100%;
height: 100%;
}
p {
width: 100%;
height: 100%;
}
To make things a little bit more interesting, we could make our mixin accept parameters. Even better, we are able to define default values if the mixin is called without arguments.
#mixin awesome($w: 100%, $h: 100%) {
width: $w;
height: $h;
}
body {
#include awesome(960px);
}
p {
#include awesome;
}
The result will be similar, but the width of the body is different.
body {
width: 960px;
height: 100%;
}
p {
width: 100%;
height: 100%;
}
If you use mixins, the styles in them are duplicated for each selector.
Mixins are very helpful if you need to change or calculate something in the final output, for example if you need to apply border-radius to several elements.
However, in some other cases there is a lot of duplicative code, which could be avoided if you use #extend.
**#extend**
.awesome {
width: 100%;
height: 100%;
}
body {
#extend .awesome;
}
p {
#extend .awesome;
}
It's similar, isn't it. In Sass it looks almost identical, but the CSS the result is:
.awesome, body, p {
width: 100%;
height: 100%;
}
Shorter than the version using a mixin. You can't pass parameters during the extending, but that's not the idea actually.
#extend should be used in those places where you want to share properties between the elements.
Well, Mixin is like function that can do some work and output processed result while extend is like pre-defined cop-paste code
In programming terms:
#include is like calling a function with or without parameters
#extend is like Inheritance
Function means, every time we call the function, the body of the function gets duplicated as we might pass dynamic information in the form of parameters. so you would get a Copy of the body.
Inheritance means, there is no duplication and we get a Reference instead of copy. so who ever extends that reference would get the same body.
I am using CSS Less for my project, I have a problem to write the following CSS into Less.
Here color is same for .btn and .header but how can I simplify using Less?
variable
#whiteColor: #fff;
CSS
.btn{
border: none;
color: #ffffff;
}
.header{
color:#fff;
}
I have written in the following way. Is there any way to write it in only one statement?
.btn{
border: none;
color: #whiteColor;
}
.header{
background:#whiteColor;
}
Assuming that the property to which the value needs to be assigned is the same (color), you can do it using a single statement by grouping selectors. Below is a sample snippet:
#whiteColor: #fff;
.btn{
border: none;
}
.btn,
.header{ /* selector grouping */
color: #whiteColor;
}
Note that you don't even need Less for the above if the color is not going to change often. I would assume this is the case because of how closely the variable name is coupled to the color and in that case you can use pure CSS like in the below snippet.
.btn {
border: none;
}
.btn,
.header { /* selector grouping */
color: #fff;
}
/* Just for demo */
body {
background: black;
}
<div class='btn'>Some button</div>
<div class='header'>Some header</div>
If the properties are different (one has white as its color while the other has it as background), then it cannot be simplified into a single line even while using Less.
You can use a parametric mixin and property name interpolation like in the below snippets but these only complicate the situation than simplify it.
/* If color is same but property is different */
#whiteColor: #fff;
.apply-white-color(#property){
&{
#{property}: #whiteColor;
}
}
.btn{
border: none;
.apply-white-color(color); /* the property to which white color should applied is passed as parameter */
}
.header{
.apply-white-color(background);
}
/* If property is same but color is different */
#whiteColor: #fff;
#redColor: #f00;
.apply-color(#value){
&{
color: #value;
}
}
.btn{
border: none;
.apply-color(#whiteColor); /* the color which should applied is passed as parameter */
}
.header{
.apply-color(#redColor);
}
I am using jquery.wijmo-complete.all.2.3.8.min.css.
but i can't find answer......
code:
#slider
{
width: 300px;
}
.wijmo-wijslider-incbutton
{
/*Sets the styles of the outer edge of the increment button.*/
background: CornflowerBlue;
}
#slider .ui-slider-handle
{
/*Sets the styles of the thumb button.*/
background:#310D4F;
border-color: red;
}
You need to set the background-image as none. Here is the correct css:
.wijmo-wijslider-incbutton, .wijmo-wijslider-decbutton {
background-image: none;
background-color: red;
}
I want to customize the looks of the range input type in HTML5 to look something like a progress bar. I've tried applying some common CSS attributes using CSS class but it seems that they are not working.
Can any one direct me how to customize it??
input[type='range'] {
-webkit-appearance: none !important;
background:red;
height:7px;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
background:blue;
height:10px;
width:10px;
}
If you're using HTML 5, why not use the progress tag?
<progress value="1534602" max="4603807">33%</progress>
EDIT: nowadays all major browser support both
<progress>
input[type='range']
Hence you should use one of these two, as explained in other answers, and this should not be the accepted answer anymore.
The <input type="range"> is pretty new and you are already attempting to customize it with CSS. :)
I wouldn't try that for two reasons:
there might be huge compatibility issues now and for the next few (or many) years.
Think that in nowadays a form control like <select> (available since the web started) is still problematic to be customized with CSS in a cross browser way. For instance if you set a padding for the select boxes, many browser (IE7, OPERA9, CHROME5, SAFARI4) will totally ignore the padding.
It works only IE8 and on FF 3.6. (all tests done with HTML5 DOCTYPE so in standard mode).
The <input type="range"> has been created to show a slider NOT a progress bar, attempting to cheat on it with CSS in order to transform a slider into progress bar it sounds bizarre. Like trying to use CSS to change a <textarea> into a table, but why don't you simply use a <table> to render tables?!
To show a progress bar in HTML5 you should follow the suggestion given by marcgg in his answer. Since no browser is currently rendereing it you could use a simple div with a p inside like this:
<div id="progress" style="position:relative; width:100px; height:20px; border:1px solid #cccccc;">
<p style="position:absolute; left:0; top:0; background-color:#0000ff; height:100%; width:30%; font-size:0px;"> </p>
</div>
Then simply update the style.width of inner P element in percent like:
width: 75%
FYI: if you want to do that in simple JS here is the code:
document.getElementById('progress').(getElementsByTagName('p')[0]).style.width = '75%';
I did a cross-browser solution (+IE9, FF, Chrome, Safari), only CSS.
[Updated 24.11.2016]
http://codepen.io/nlfonseca/pen/MwbovQ
#import 'bourbon';
$slider-width-number: 240;
$slider-width: #{$slider-width-number}px;
$slider-height: 2px;
$background-slider: #c7c7c7;
$background-filled-slider: #e33d44;
$thumb-width: 28px;
$thumb-height: 18px;
$thumb-radius: 8px;
$thumb-background: #fff;
$thumb-border: 1px solid #777;
$shadow-size: -8px;
$fit-thumb-in-slider: -8px;
#function makelongshadow($color, $size) {
$val: 5px 0 0 $size $color;
#for $i from 6 through $slider-width-number {
$val: #{$val}, #{$i}px 0 0 $size #{$color};
}
#return $val;
}
div {
height: 100px;
display: flex;
justify-content: center;
}
input {
align-items: center;
appearance: none;
background: none;
cursor: pointer;
display: flex;
height: 100%;
min-height: 50px;
overflow: hidden;
width: $slider-width;
&:focus {
box-shadow: none;
outline: none;
}
&::-webkit-slider-runnable-track {
background: $background-filled-slider;
content: '';
height: $slider-height;
pointer-events: none;
}
&::-webkit-slider-thumb {
#include size($thumb-width $thumb-height);
appearance: none;
background: $thumb-background;
border-radius: $thumb-radius;
box-shadow: makelongshadow($background-slider, $shadow-size);
margin-top: $fit-thumb-in-slider;
border: $thumb-border;
}
&::-moz-range-track {
width: $slider-width;
height: $slider-height;
}
&::-moz-range-thumb {
#include size($thumb-width $thumb-height);
background: $thumb-background;
border-radius: $thumb-radius;
border: $thumb-border;
position: relative;
}
&::-moz-range-progress {
height: $slider-height;
background: $background-filled-slider;
border: 0;
margin-top: 0;
}
&::-ms-track {
background: transparent;
border: 0;
border-color: transparent;
border-radius: 0;
border-width: 0;
color: transparent;
height: $slider-height;
margin-top: 10px;
width: $slider-width;
}
&::-ms-thumb {
#include size($thumb-width $thumb-height);
background: $thumb-background;
border-radius: $thumb-radius;
border: $thumb-border;
}
&::-ms-fill-lower {
background: $background-filled-slider;
border-radius: 0;
}
&::-ms-fill-upper {
background: $background-slider;
border-radius: 0;
}
&::-ms-tooltip {
display: none;
}
}
You can in Webkit, through the -webkit-slider-thumb pseudo-element: http://jsfiddle.net/leaverou/BNm8j/
input[type=range] {
-webkit-appearance: none;
background-color: silver;
width: 200px;
height:20px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #666;
opacity: 0.5;
width: 10px;
height: 26px;
}
<input type="range" min="0" max="100" />
Although the others are right about input type="range" not being the right element for the job.
You should use the <progress> element and for browsers that don't support it, this polyfill: http://lea.verou.me/polyfills/progress/
You can edit the CSS of the range input, using input[type="range"]::-webkit-slider-thumb and input[type="range"].
Here is the example of it,
http://webstutorial.com/range-input-slider-html5-css3/html-5
I know this is already answered but just sharing it.
jQuery Tools provides a plug-in that creates stylable elements from a range input, and what's more, makes it still work as a slider in older browsers that don't support input[type=range].
Allows you to style:
the handle
the slider
optional progress fill
value output field
I've used it many times and it's a great tool.
WARNING: doesn't work on touch devices. I don't have as much experience with it, but you could try the jQuery mobile slider: http://view.jquerymobile.com/1.3.0/docs/widgets/sliders/
http://jquerytools.github.io/demos/rangeinput/index.html
When I looked at this question I needed something simple. There are already a number of framework answers on how to do this, but sometimes it is more lightweight and flexible just to create your own. Of course, you get a certain amount for free with a framework (and it is often the right choice if it is a good fit), but you then have to worry about framework compatibility, support and digging into the depths of the framework to go outside its boundaries.
Here is a simple javascript-only slider. Basically it is an img for the slider, an img for the button and a callback with a progress percent. Not an all-singing and dancing slider, but something simple to build on.
The demo
The HTML
<div id='bb_sliderContainer' ondragstart="return false;" ondrop="return false;">
<img id='bb_slider' src='slider.png'/>
<img id='bb_sliderButton' src='sliderbutton.png'/>
</div>
The script
Place in a javascript file:
(function(bb,undefined){
bb.Slider = function(buttonCssId,sliderCssId,initialPercentage,progressUpdate)
{
var halfButtonWidth = 5;
var sliderMoving = false;
var buttonElement = document.getElementById(buttonCssId);
var sliderElement = document.getElementById(sliderCssId);
var length = sliderElement.clientWidth;
var leftPos = 0;
var rightPos = leftPos + length;
length = rightPos - leftPos;
if( initialPercentage )
{
var buttonPos = leftPos + initialPercentage / 100 * length;
buttonElement.style.left = buttonPos - halfButtonWidth + 'px';
}
buttonElement.addEventListener( 'mousedown', function(){
sliderMoving = true;
} );
document.addEventListener( 'mousemove', function(event){
if( sliderMoving == true )
{
var rect = sliderElement.getBoundingClientRect();
var mouseX = event.clientX - rect.left;
var prop = mouseX / length;
if( prop < 0 )
{
prop = 0;
mouseX = 0;
}
if( prop > 1 )
{
prop = 1;
mouseX = length;
}
buttonElement.style.left = leftPos + prop * length - halfButtonWidth + 'px';
progressUpdate(prop * 100);
}
});
document.addEventListener( 'mouseup', function(){
sliderMoving = false;
});
}
}(window.bb = window.bb || {}));
Example use
HTML:
<img src='space.png' style='width:50%;position:relative;top:20px' id='bb_sliderSubject'>
Javascript:
function sliderUpdate(percentage)
{
var sliderSubject = document.getElementById('bb_sliderSubject');
sliderSubject.style.width = percentage + '%';
}
window.onload=function()
{
var slider = new bb.Slider('bb_sliderButton','bb_slider',50,sliderUpdate);
}
This is an example:
input[type='range'] {
-webkit-appearance: none;
border-radius: 5px;
box-shadow: inset 0 0 5px #333;
background-color: #999;
height: 10px;
vertical-align: middle;
}
input[type='range']::-moz-range-track {
-moz-appearance: none;
border-radius: 5px;
box-shadow: inset 0 0 5px #333;
background-color: #999;
height: 10px;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
border-radius: 20px;
background-color: #FFF;
box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
border: 1px solid #999;
height: 20px;
width: 20px;
}
input[type='range']::-moz-range-thumb {
-moz-appearance: none;
border-radius: 20px;
background-color: #FFF;
box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
border: 1px solid #999;
height: 20px;
width: 20px;
}
<input type="range">
See http://afarkas.github.io/webshim/demos/demos/webforms/styler/index.html?range
It's a tool that produces cross-browser code to style both native and webshims range inputs like you want.
.ws-range, input[type="range"] {
/* Range styles: width, height, border-radius, background */
-webkit-appearance: none;cursor: pointer;border: 0;outline: none;padding: 0;margin: 20.5px 0;
}
.ws-range .ws-range-thumb {
/* Thumb styles: width, height, border, border-radius, background */
}
.ws-range.ws-focus .ws-range-thumb {
/* Thumb focus styles: border-color, background */
}
.ws-range.ws-active .ws-range-thumb {
/* Thumb active styles: border-color, background */
}
.ws-range .ws-range-min {
/* Thumb progress styles: display, background */
border-radius: /* same as range */;
height: 100%;
}
input[type="range"]::-moz-range-track {
border: none;background: transparent;
}
input[type="range"]::-ms-tooltip {
display: none;
}
input[type="range"]::-webkit-slider-thumb {
/* Thumb styles: width, height, border, border-radius, background */
-webkit-appearance: none;
}
input[type="range"]::-ms-track {
/* Range styles: width, height, border-radius, background */
color: transparent;border: 0;
}
input[type="range"]::-moz-range-thumb {
/* Thumb styles: width, height, border, border-radius, background */
}
input[type="range"]::-ms-thumb {
/* Thumb styles: width, height, border, border-radius, background */
}
input[type="range"]:focus::-webkit-slider-thumb {
/* Thumb focus styles: border-color, background */
}
input[type="range"]:focus::-moz-range-thumb {
/* Thumb focus styles: border-color, background */
}
input[type="range"]:focus::-ms-thumb {
/* Thumb focus styles: border-color, background */
}
input[type="range"]:active::-webkit-slider-thumb {
/* Thumb active styles: border-color, background */
}
input[type="range"]:active::-moz-range-thumb {
/* Thumb active styles: border-color, background */
}
input[type="range"]:active::-ms-thumb {
/* Thumb active styles: border-color, background */
}
input[type="range"]::-moz-range-progress {
/* Thumb progress styles: display, background */
border-radius: /* same as range */;
height: 100%;
}
input[type="range"]::-ms-fill-lower {
/* Thumb progress styles: display, background */
border-radius: /* same as range */;
height: 100%;
}
.no-cssrangeinput input[type="range"] {
background: transparent;margin: 0;border: 0;min-height: 51px;
}