First post so apologies if this has been asked before. I have not been able to find a solution.
I know with the move to IE10, the options are displayed above and below the currently selected option. I can live with that. However, the options are surrounded by a thick (2px) solid black line. I have tried to manipulate the css with
select:focus {
border: 1px solid #c3c3c3;
}
yet that doesn't seem to have any effect.
Any advice would be gratefully received.
Jon
maybe with a mouse hover instead of a focus?
I don't really understand what you mean by selected option
IE10 has a few pseudo elements to deal with form styling, such as styling the disclosure arrow on selects with ::-ms-expand [0]. However, there does not seem to be a way, that I can find documented, that allows the pop-up part of the select control to be styled.
[0] http://msdn.microsoft.com/en-us/library/windows/apps/hh767361.aspx
Related
Ayo,
I have built a contact form and every time I click on a specific input field to fill it out, it imitates a weird blue border around the input field.
I think the best way to present you the problem with code is if you visit my website - I don't know which of my 1k line in css triggers that so please take a look to the very bottom of the website https://www.adamsochorec.com/about/[ ](https://www.adamsochorec.com/about/)
I've tried to remove it by setting border: to none on :focus but that did not work and the effect isn't generally visible while I inspect the page. So I was wondering if it might be some browser preset or something? It is both on Brave and Safari browsers.
no outline before clicking in, outline after clicking in
EDIT: Outline: none worked!
It seems like an input, you can use:
input:focus{
outline: none;
}
You can replace input with textarea or anything else in your case.
This is the default color of a submit button, without any particular style. (using chrome)
And this is that button after using this input[type="submit"]{border-radius: 2px;}.
As you see the color of the second one, changed suddenly without any particular reason and also you can see shadow on the right and the bottom sides of the border. (body{direction:rtl;})
What's the reason? I just need the default button with a bit round border(no more). Is there any solution? or I should use an image for this?
JSFiddle here.
The regular, unstyled button is a system UI element (or in Chrome's case, a custom one). Thus, it might not have a CSS equivalent. So when you try to style the button, it reverts back to a plain one that can be styled, but happens to have different colors.
You are going to have to completely take over and specify every part of the button to get a similar look back (and even if you do this, Firefox users, which uses the system default buttons, are going to have a shock). If you liked that look, here's how to replicate it to some degree (Demo):
border: thin solid gray;
border-radius: 2px;
padding: 2px 4px;
background-image: linear-gradient(white, lightgray);
Not to mention :hover and :active state styling. Why not take the opportunity to come up with a nice custom look that fits your page?
If you are attempting to style a form submission button, you are very much so better off using the button element which is fully styleable. The input type=submit element is very hard to style and not consistent across browsers. <button> will let you do anything to it.
This is a learning exercise for me, so thanks in advance for not telling me why I don't want to do to the following. I don't want to do, I want to understand.
Given the following CSS:
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
input[type="checkbox"]:focus {
outline: none;
}
The specificity for both shows as 0,2,1, and everything I read about CSS says the second style should override the first as it comes last. If I get more specific about the second style, it wins. But as posted, Chrome doesn't display the outline, but IE11 and FF28 do. This seems to me to be such a fundamentally simple application of CSS. Does anyone have any insight into what the underlying issue is, so that I can pull it into my thinking as I'm developing stylesheets?
EDIT: Chrome also doesn't display the outline if I delete the second style. In Chrome, the outline: thin dotted are overridden by the following outline line. So it appears that per the spec, Chrome is playing by the book and FF and IE don't? Could it be a union vs. override difference in how browsers interpret CSS?
With apologies, the error was mine. When I switched from bootstrap.min.css to bootstrap.less, I didn't remove the former from loading so it was loaded last and overrode my Site.less -> site.css. I figured it out after I tried to create a fiddle, which I should have done in the first place. Feel free to down-mod this post to hell in the way that it deserves.
Does anybody know how to remove the dotted outline on buttons in Opera?
I have done it.
Here you go: http://jsbin.com/oniva4. [tested on Opera 10.5/11]
The secret is using outline-offset:-2px; (effectively covering the dots) and the background's color for the outline. outline-offset is supported since version 9.5.
The introduction of the article Do not lose your focus
For many web designers, accessibility conjures up images of blind users with screenreaders, and the difficulties in making sites accessible to this particular audience. Of course, accessibility covers a wide range of situations that go beyond the extreme example of screenreader users. And while it’s true that making a complex site accessible can often be a daunting prospect, there are also many small things that don’t take anything more than a bit of judicious planning, are very easy to test (without having to buy expensive assistive technology), and can make all the difference to certain user groups.
In this short article we’ll focus on keyboard accessibility and how careless use of CSS can potentially make your sites completely unusable.
And the list of test given by the article on outline management.
Update 2011-02-08
I can confirm that it is not possible for now. There is an open bug for it.
I say this with the clear proviso that you shouldn't remove the outline unless you replace it with something else that indicates focus state ...
If you apply a transform to the element, it kills the outline in opera; it doesn't even need to do a visible transform, merely applying the property is enough. So this will do the job:
#myButton:focus
{
-o-transform:rotate(0);
}
But I can't promise that wouldn't be considered a rendering bug, and consequently something that may change in the future.
I believe the problem lies in where you specify the outline properties. Try this:
*:focus, *:active {
outline: none; (or possibly outline: 0)
}
I researched this more and it looks like on input fields and buttons it will not work unless you edit the browser's config, like Firefox's about:config page. It seems to be done for accessibility reasons so that a keyboard can be used to fill out and send a form without using a mouse.
I used that trick above for my text area and worked fine! Using a Text Area with an id "itens", here it goes!
#itens:focus, #itens:active{
outline: 1px solid white;
outline-offset: -2px;
}
So, you can play with that:
#itens:focus, #itens:active{
outline: 1px solid lime;
outline-offset: -2px;
}
Are you looking for:
button{
outline:none;
}
or if your button is an input...
input[type=button]{
outline:none;
}
Just read this forum post on the opera website
http://my-beta.opera.com/community/forums/topic.dml?id=712402
There seems to be no fix for it
Further to my tip above -- with experience I've found that it doesn't always work, and isn't always appropriate anyway, since it can change the way the element is rendered in subtle and sometimes unpleasant ways.
So, if that doesn't work, another thing you can do which often does, is to specify the outline color as "rgba(0,0,0,0)"
if you attached css-reset in your stylesheet should solve the issue.
Remove outline for anchor tag
a {outline : none;}
Remove outline from image link
a img {outline : none;}
Remove border from image link
img {border : 0;}
This is less of an answer, and more of an explanation as to what seems to be going on:
The story
My reason for removing opera's outline was to add an outline of my own. To add an outline I used:
:focus{
outline:1px dotted #999;
outline-offset:-3px;
}
This works perfectly fine in every other browser... except Opera. Opera instead gives you this weird interference pattern, which looks like a dotted-dashed outline:
now if you remove your outline, you still have the standard outline that Opera provides, a nice simple 1px spaced dotted line:
Since I have no way of adding a style to every browser except Opera, I instead decided on removing Opera's outline before adding my own. Using brothercake's solution, -o-transform:rotate(0); to do this and then applying my own outline:
Voila!
An Explanation?
From what I can tell, Opera adds it's own secondary outline on top of any outline defined by CSS.
This secondary outline seems to have an independent color, width, style, and offset.
Color is the opposite of the background,
Width is 1px,
Style is dotted,
and the offset is 2px smaller than the border.
sorry there is no style image, the upload didn't work correctly
one interesting thing is that the dotted style of the Opera outline is not the same as the CSS outline's dotted, otherwise there would be no interference pattern with both:
Conclusion:
As I stated above, I am using brothercake's solution which is to nullify the opera border with:
-o-transform:rotate(0);
As he mentioned in his later comment this 'fix' does have some issues as it is a rendering bug:
I have noticed that when returning window or tab focus to the page containing the button, if the button previously had focus, the Opera outline will reappears until the button loses focus or is hovered over.
better:
outline: solid 0;
for all web browsers
I have the below code:
<button onmousemove="this.style.border='2px #555555 solid';"
onmouseout="this.style.border='';">Test</button>
On mousemove, it correctly changes the border as specified. On mouseout my intention is to change the border back to the original. This works in Gecko based browsers but not in IE. IE removes all the borders and the button becomes 2D.
How do I get back the original 3D look of the button?
Note: For debugging, I tried alert(this.style.border) the get the value of the original border. It shows it blank. So the original border value seems to be blank. But setting to blank does not bring the original look back. :(
Try setting and clearing a class for the element and assigning the border value to the class. Just like below:
.buttonHover
{
border: 2px #555555 solid
}
<button onmousemove="this.className='buttonHover';" onmouseout="this.className='';">Test</button>
Note that this simple JS code will break your existing classes assigned to the element if there are any. If you are to use additional classes, please add a comment declaring the situation and I'll change the code accordingly.
As far as I know, there is no way to restore the original OS look once the element's border is set, although it strikes me as odd that even emptying border doesn't do the job. Ah well. The OS style is not just a classic border, but includes a black outline (depending on OS visual settings, even more than that).
Seeing as IE < 8 doesn't understand outline, I think the best workaround would be putting an element around the button, and highlighting that on hover.
Would recommend using CSS for the same rather than javascript. You can do the following.
Define only the hover propery of the button.
HTML :
<button value="Hello">Hello</button>
CSS :
button:hover
{
border:1px solid #333;
}
I think that what you are looking for can be found in the bowers user agent CSS. Here is a table that will give you a good idea of whats going on with different browsers http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm .