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.
Related
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
In all other browsers, including IE10, this CSS removes the outline when clicking on a mapped area on an image anchor:
area {
outline: none;
}
But lo and behold, not in IE11, at least not the latest version I can get for Win7. A quick demo page: (demo removed). Click on a thumbnail; on the full-sized images, the right 60% is a link to the next image, the left 40% to the previous image.
I've tried all manner of CSS variations, including:
outline: none !important;
Applying it to every CSS class and ID I can think of seems to make no difference, including *, img, map, area, .gr-slideimage, #gr-thisMap, and so on. The only thing I've found so far that works is the old:
hidefocus='true'
on the img tag itself, but that doesn't validate, of course.
Can anyone crack this with CSS?
IE11/Win7 seems to ignore border settings set to 'none' in some circumstances. Had this issue with CSS styled buttons this week. I had to make the border 'solid' and change the color to match. Sure there's a better way - surely MisterNeutron and I aren't the only ones to notice this bug?
It appears IE11 needs outline-style: none; in order to work properly. You can also refer to: http://msdn.microsoft.com/en-us/library/ie/cc304065(v=vs.85).aspx for any other possible IE related issue. Hope this helps.
here is a regular <select> box look on firefox (osx):
if i add the following style to it:
form select.error {
background-color: #FFAAAA;
}
it looks like this:
question:
Is there any way to keep the pretty styling and still make it red?
The "pretty styling" is all a single background image drawn by the OS. So when you override it, Firefox has to fall back to some other kind of styling...
So no, you can't keep the original look but just change the background color.
You cannot reliably style select boxes as browsers tend to stick to the OS's defaults. Your anser is no, if you only intend on using CSS.
There are jQuery options for styling select boxes available:
http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/
I know it's possible with jquery to make something that looks like a select box so I can make it look however I want. However, with just css, how much control do I have?
I use border, padding, and width, and the end result looks great.
The only thing that bothers me is the part that drops down. Is there any control over this? (It looks dumb to have padding and on the drop down list have none).
You have some control, but there is quite a bit of variation between browsers and operating systems. For example, Internet Explorer on Windows will always show the standard grey down arrow, even though you can re-colour this in other browsers.
As for the part that drops down - these are option tags, not select; so to change them you'll be applying styles to the option tag instead:
select {
border: 1px solid red;
}
option {
background-color: blue;
}
Luckily some other people have done some research detailing what works and what doesn't, so here are some resources for you:
Styling form controls in general: http://www.456bereastreet.com/archive/200701/styling_form_controls_with_css_revisited/
Selects specifically: http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/
Browser comparison: http://www.electrictoolbox.com/style-select-optgroup-options-css/
Today I notice outline propery in CSS. However I don't know why it is added to CSS? What for?
For me, margin, padding, border is enough.
outline creates a border outside the element's area, not adding to its width and not influencing the surrounding layout. From the quirksmode.org page on outline:
The outline is not actually a part of the box, it does not count in any way towards the width or height of a box.
That is a very useful feature indeed, because it allows e.g. highlighting an element on hover / focus actions without disturbing the neighboring elements. The slight dotted outline around focused links in Firefox is done using the outline property.
It's not supported by IE < 8, though, so it's only of limited everyday use.
Quirksmode.org compatibility table
A quick google, http://www.google.com/search?sourceid=chrome&ie=UTF-8&q=outline+css, leads to this article which mentions that you can kill the dotted borders on anchors and such with outline.
To add, it's a border that doesn't take up space of the element and doesn't shift things around. Can be useful for debugging. Also not supported in IE6/IE7.
For this reason :)
Notice the dotted border around the image:
It is used to remove that.
It's usually used to indicate focus from what I understand. If you look at some people's CSS resets, they will do something like this:
*:focus { outline: none; }
You'll see it mostly around anchor tags if you just open up a page and starting pressing TAB a bunch of times you should see different links have the outline applied unless the stylesheet specifically says not to.