Select; when the dropdown is searchable, there is a blue outline around the cursor:
https://ibb.co/faG4X8
I can get rid of the cursor by using this:
.Select-input > input {
color: transparent;
}
How can i also get rid of the blue outline on focus
thanks,
mihai
You are correct that outline: 0 or outline: none will remove the blue outline when an element is focused.
That is from the browser's default stylesheet. Each browser implements that focus state indicator in some way.
I would caution you to be aware that the focus indication is important for accessibility. If the default styling is removed, it's best to replace it with some other visual indicator that the element is focused. Without that change, it makes a site nigh-impossible to traverse if someone is using a keyboard, or potentially other non-traditional methods of access.
From the html5 spec--
“…if an alternative focusing style isn’t made available instead, the page will be significantly less usable for people who primarily navigate pages using a keyboard, or those with reduced vision who use focus outlines to help them navigate the page.”
further reading: Stop messing with the browsers default focus outline
Related
There's a button conditionally disabled, and the disabled button is greyed out.
The background color is #e0e0e0 and the text color is #a6a6a6, so the contrast ratio is 1.84 out of a required 4.5. I was wondering if there's any way to skip the color contrast check on the disabled button.
It already has the aria-disabled property now.
There are quite a few differing opinions about disabled buttons, but the general consensus is that you need a lot of extra code to make it accessible. Not only are the colour contrasts of standard disabled buttons not AA compliant, but the fact that the button becomes not intractable causes issues for keyboard users, as the focus will just skip straight past the button.
A better option would be to not use the disabled attribute, and instead give it a disabled class, as shown below. This ensures that the contrast is controlled by you and can be of a sufficient contrast ratio, whilst still maintaining the un-clickable functionality that you want, and avoiding frustration for keyboard-only users. You can then also apply some text to explain why the button isn't intractable.
.disabled {
pointer-events: none;
background-color: your-contrasting-colour-here;
}
I've been trying to make myself a simple night mode for google docs using CSS (through a custom CSS chrome extension), but I'm having a lot of trouble. Mind you I only have basic Highschool CSS knowledge, and no more.
I am aware there are extensions for this sort of thing, but those extensions always make EVERYTHING dark, and I really don't want everything dark, just the sides/background (which I've already managed to find), the "explore" button on the bottom right (with visible text), and the outline button on the top left (With a visible icon)
This is what I've managed to find so far (Just for the sides / background):
.kix-appview-editor-container,.gb_Va {
background: #131719;
color: white;
}
.docs-gm-dialogs .docs-findinput-container, .docs-gm-dialogs .docs-gotoinput-container, .docs-copydocdialog-destination-button, .docs-material.docs-navigation-tab-button.goog-inline-block {
border: 0;
}
I can't for the life of me figure out how to darken the 2 buttons (bonus if someone can also darken the little bubble button that pops up to the right when you highlight text, but I'll take what I can get).
Any help (or improvements to what I already have) would be hugely appreciated, thanks.
I am trying to remove a blue outline from the option list of a select element.
As I only see this outline on Chrome on Windows 7, here is an image which points out the outline I’m talking about
Here is the code: https://jsfiddle.net/463pLc67/
I’ve tried using outline-color on the option:focus as well but it doesn’t seem to have any effect. Is there any way to get rid of this outline just using CSS?
Because browsers handle UI aethetics differently for elements like radio buttons, checkboxes and select drop downs it's hard to overcome without using JS or complex CSS/HTML. I think Select elements are even harder than radio buttons and checkboxes, I don't think there is a reliable HTML/CSS only for this.
Sorry, I know this isn;t the answer you're looking for. You could also try 'border: 1px solid #COLOR' as a last ditch attempt.
The appearance: none rule changes a bit the display (On Ubuntu/Chromium) but makes it more buggy: no right-border but still some left-borders (No effect on firefox).
Normal:
With appreance: none:
You can play with the background-color which works also on <option> to make it closer to your outline color so it would hide it a little.
select.lalala option {
background-color: #727272;
}
Nothing visually acceptable IMHO.
Btw this is browser specific as also probably OS specific so it seems to be a loss of time.
I'm implementing a Kendo PanelBar on my webpage. I'm pretty new to CSS/HTML, so I'm lost on how to remove a default style on the PanelBar. When I select a panel, it opens properly and looks fine. When I move the mouse away from the open panel, there is an orange border that appears on the open panel. I have attached two images showing the issue.
Everything looks fine when I hover on the open panel:
When I move the mouse away, there is an orange border:
Can anyone tell me how to remove this border?
I was challenged with the same issue and submitted a ticket to kendo support. Iliana Nikolova supplied the following:
.k-panelbar .k-state-focused.k-state-selected {
box-shadow: none;
}
In my solution, the panelBar box shadow was still showing, I then used page inspector (F12) and tested following rule using the box-shadow:none; property and that did the trick for me.
.k-state-selected > .k-link, .k-panelbar > li > .k-state-selected, .k-panelbar > li.k-state-default > .k-state-selected.k-link {
background-color: #C7D3A9;
color:black;
box-shadow: none;
}
Before your post I was searching the a boat ton of code and getting no place. I used the recommendation of using theme builder and took a video (using windows media encoder 9), I feel by illustrating the problem it helped generate a better kendo response. Iliana didn't return my code with the fix so this left me hanging but he did supply the key element.
If you find this solves the issue please vote answered. Others who also find this helpful please also provide positive feedback.
I am not sure what element it is, because you did not give the exact code.
But you can use a simple css, find the element and apply the css to remove the orange border.
I had the same issue. Use the Kendo Theme Builder here at http://demos.telerik.com/kendo-ui/themebuilder/ and then load the default theme. You should see the themebuilder panel appear in the bottom right corner of your screen. Look for "Widget States" drop down. You will see the options there and you can change the orange border color.
Now if you want to completely remove the orange border and active state, you will need to open up the kendo.default.min.css file and do a CNTRL+F (Find) for the hex color code #f35800. Look at the selectors carefully to make sure you are modifying the correct style (i.e. .k-state-selected)
Then when you are sure you've got the right selector(s), change the color to "transparent" (i.e. border-color:transparent)
This worked for me
I need to create a web application to run on Blackberry browser. The issue i am facing is:
There are a few text boxes on various pages which are given a CSS class. I needed to use border property to give them all- 1px solid Black. But on incorporation of this border property for Blackberry, there is an open issue. Once i tap on the edit field, the Blackberry browser is somehow filling the text box with blue background. Note that such behaviour is not seen on iPhone and Android. It seems that Blackberry browser is using its default behaviour. Is there any way to stop the automatic behavior of Blackberry browser such as some css property or javascript or meta tag? Has anyone else faced similar problem?
On More research into this, i found that the border is not actually making the background as blue. But, as soon as we include border property, it highlights that element with its default blue color. (Likewise, it does in case of taps on images). I tied using -webkit-tap-highlight-color property to disable it. But, it works on iPhone but not on Blackberry.
More research lead me to css property "outline:none" Outline property was leading to the highlight of any element. The issue is solved as soon as you do the outline:none
You're better off not overriding the default behaviour of the browser. Blackberry users will likely be accustomed to the blue highlight. It is most probably being added with a :focus CSS pseudo-class. If you stil want to override it, you could add a input:focus { background: #fff; } etc. rule.