My project needs this scroll bar (image given),
I applied this to my css
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background-color: #FFFFFF;
} /* the new scrollbar will have a flat appearance with the set background color */
::-webkit-scrollbar-thumb {
background-color: rgba(242,91,32,0.9);
} /* this will style the thumb, ignoring the track */
::-webkit-scrollbar-corner {
background-color: #FFFFFF;
}
but when i checked my page only chrome is showing the effect Firefox (27.0.1) and Internet Explorer(10for) are not responding to the changes.What I must add so that it becomes uniform for all of them ?
As mentioned by N.Nihar in a comment, Firefox and Internet Explorer in current versions don't support scrollbar customisation.
If you need to have the scrollbar styled, you may want to use a custom Javscript or perhaps even better a jQuery based scrollbar element. The first one to show up in google search is a Stack Overflow answer, or you can go for the Tiny scrollbar, or one from this list. There are plenty of Javascript and jQuery based scrollbars readily available.
If you do use one of those, though, be sure to test your solution thoroughly, because the behaviour of 'native' scrollbars is not that easy to mimic.
firefox and IE doesn't have capabilities for customizing scrollbar
Related
In some designs for web projects, I've seen that the designer wants the browser's native text-selector to be customized following the Design System. For example, by changing the background and color of a text when it is selected. I'm not sure about the accessibility issues this can cause. My first take is that if the custom CSS matches the requirements of WCAG 1.4.3 Contrast (Minimum) it would be OK, as it happens with custom outlines for focus. However, I'm not sure about the secondary issues that this could cause to users with special contrast configurations in their system and browser.
1. Would overriding the browser's native text-selector with CSS be compliant with WCAG?
2. Can it cause other accessibility issues beyond what WCAG covers?
In my SASS code, it looks like this: (from this CSS trick)
body *::selection {
color: $white;
background: $primary-color-main; /* WebKit/Blink Browsers */
}
body *::-moz-selection {
color: $white;
background: $primary-color-main; /* Gecko Browsers */
}
A minimal reproducible example (without variables):
This code changes the text-selector for all elements that are recurrent descendants of the body in any HTML code.
body *::selection {
color: white;
background: black; /* WebKit/Blink Browsers */
}
body *::-moz-selection {
color: white;
background: black; /* Gecko Browsers */
}
Custom selection styles are compatible with WCAG criteria, as long as you fulfill the general requirements for color contrast and so on.
That said, custom selection styles could still be an accessibility issue. Users sometimes specify their own selection styles to fit their own needs. Additionally, users may be confused by changes to the expected appearance of selected text.
MDN has a little more info about selection accessibility.
Customizing the text selection color is perfectly fine as long as you follow 1.4.3 Contrast (Minimum), as you noted. I've seen custom selection colors done for branding purposes and it can look really good.
There aren't any other WCAG issues with having a custom selection style but one thing you might want to check is if you turn on the OS's high contrast mode, whether PC or Mac, can you still see/read your text when it's selected? If you can't, it's not a strict WCAG failure but would certainly be a usability issue.
Also, having a custom selection style does not preclude the user from having their own customizations. I do this myself. I have a style sheet associated with my various browsers so that my customizations show up on any website I visit. I have !important in my CSS so that it will override whatever the site tries to do so I could still have my own selection style no matter how you tried to set it.
I'm working on a contact form where the select inputs are designed to have white text on a black background. The desired styles are being applied correctly in every instance except when accessed via Safari or Firefox on either an iPhone or iPad.
The relevant CSS Script is as follows:
select{
-webkit-appearance: none;
color: white !important;
}
Is there a particular reason that these browsers may not be processing this style? And how would I circumnavigate it?
*edited as both Firefox and Safari express this same issue
This type of styling is not currently supported by WebKit browsers on Mac OS X. You may find some more ideas here: Pure CSS solution to styling specific options in Webkit based browsers?.
Have you tried styling the option?
select option {
color: white;
}
I have an HTML element textarea with defined CSS rule { resize: both }. In FF when the user mouse over the right bottom corner of textarea the cursor changed according to value of property resize, but in Chrome cursor doesn't change.
Please open this example in FF and Chrome to check the difference.
Is it a bug of Google Chrome and can I fix it with CSS on my side?
Update
I reported bug to Chromium:
https://bugs.chromium.org/p/chromium/issues/detail?id=942017
Update 2
The bug was fixed in Chrome 80.
Actually, there are, or at least were ways in which you could style the resizer and add cursor: se-resize; on hover. Check out this post: Can I style the resize grabber of textarea?
It describes how you can use ::-webkit-resizer to style the resizer:
::-webkit-resizer {
border: 2px solid black;
background: red;
box-shadow: 0 0 5px 5px blue;
outline: 2px solid yellow;
}
Unfortunately it stopped working in Chrome and I couldn't anything similar. (I think it still works in Safari).
But fear not, it's not hard to make a custom handle. Actually, I would encourage you to use a custom one as the default one is too small and hard to hit. Especially with touch. There are actually a lot of sites that use custom handles (or at least automatic resizers based which grows based on the content. Works great on touch too!).
Ie. Stackoverflow uses a custom handle (TextAreaResizer):
GIF of Stackoverflows resize handle
There are also lots of libraries for exactly that purpose, just do a Google search, and you'll find something that works for you :)
This is rendered by browser itself cant be designed using css
I'm having an issue with the select drop down button in twitter bootstrap. It's happening in the two browsers I have installed on the machine (IE11, Chrome) and it's not just restricted to 'my sites'.
Here is a screenshot of the bootstrap website (OS: Windows 8.1 Broswer: Chrome) (http://getbootstrap.com/css/#forms-controls):
I have checked the console window and all resources are loading correctly.
Could anyone help me with why this is happening / steps to resolve?
TL;DR: you can't use CSS to change the icon. You'll have to use a library that implements a select-like control using HTML and JavaScript (at the expense of mobile-friendly selects on iOS and Android).
The icon displayed in <select> is determined by the user's browser or operating system. You can't change it using CSS.
Select display in Chrome on a Mac:
Select display in Chrome on a Mac with some styles removed:
I removed line-height, background-color, border, border-radius, and box-shadow. Note that the arrow has changed even though I didn't change any related style.
Select display in Chrome on Windows:
Notice that the icons are different, even though the code is the same.
Now what?
Although select isn'g very styleable, there are many libraries that provide a very customizable implementation of a select-like control. I like to use Bootstrap-select.
This library creates a <div class="caret"></div> that can be styled to change the icon. For example after including the Bootstrap-select JavaScript, the following code:
HTML
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
CSS
.caret{
color: red;
}
Gives me this display:
You'll lose mobile display, though:
Using a custom library will disable the mobile-friendly way iOS and Android implement selects, so make sure a custom icon is important enough to you before proceeding.
I found a solution to this, add this CSS and put 'form-override' class on each select dropdown:
.form-override {
appearance: auto !important;
}
I'm not sure why this works or why it's needed, just wanted to share how I was able to fix this problem. For me it seems to be sporadic, sometimes the problem occurs and I need this style setting to fix it, and sometimes it does not need this fix.
Use for select
select {
-moz-appearance: none;
background: rgba(0, 0, 0, 0) url("../images/dropdown.png") no-repeat scroll 100% center / 20px 13px !important;
border: 1px solid #ccc;
overflow: hidden;
padding: 6px 20px 6px 6px !important;
width: auto;
}
You can't style the <select> element itself at this moment. Every browser applies its own styling to most form elements.
So you can create your own custom select by hiding the original one, create markup, e.g. div with ul + li and live it up with javascript.
OR
If you don't mind using jQuery, try these libraries:
SelectBoxIt
Select2
Chosen
Bootstrap select
jquery-selectBox
jQuery UI
I have experienced that behavior with IE on Windows 8.1. For some reason IE renders the arrow differently as soon as you start to style the select element (which bootstrap themes usually do). Even something as simple as setting the background color triggers this behavior.
The only solution I've found so far is to style the arrow as needed. You can use the ::-ms-expand pseudo element for that. The following css rule should restore the "default" look:
select::-ms-expand {
background-color: #fff;
border: none;
}
I need to display a custom scrollbar. I would like to avoid using a jQuery plugin if possible. So can I so something like this with HTML5 & CSS3 ? :
.myScrollableBox {
width: 200px;
height: 500px;
/* Display scrollbar if content is bigger than the box */
overflow: auto;
/* This doesn't work, but can I do something similar? */
scrollbar-image: url(/images/myscrollbar.png);
}
It's actually possible, if browser does support styling of toolbar elements (= is based on WebKit). Although it's not mentioned in many tutorials (such as this brilliant one, for example), you can just use background-url property to use custom image instead of color.
For example, in this page I've changed (in Chrome Developer Tools) styling to...
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: url('http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-10/images/header-demos.jpg');
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
... and voila, I have some cyanid scroller. )
Yes you can, but it is not supported in every browser. Webkit (Chrome etc) has support for this using css:
-webkit-scrollbar
-webkit-scrollbar-button
-webkit-scrollbar-track
-webkit-scrollbar-track-piece
-webkit-scrollbar-thumb
-webkit-scrollbar-corner
-webkit-resizer
Read more: https://www.webkit.org/blog/363/styling-scrollbars/
In Internet Explorer you can user css like
scrollbar-face-color or -ms-scrollbar-face-color
-ms-scrollbar-3dlight-color
-ms-scrollbar-arrow-color
-ms-scrollbar-base-color
-ms-scrollbar-darkshadow-color
-ms-scrollbar-face-color
-ms-scrollbar-highlight-color
-ms-scrollbar-shadow-color
-ms-scrollbar-track-color
Read more: http://msdn.microsoft.com/en-us/library/ie/hh772048%28v=vs.85%29.aspx
As far as I know, other browsers do not support this at the moment.
no, that is not really possible. The scrollbar used by the browser is not an image placed inside the html page. It is part of the browser logic. You cannot simply replace that.