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.
Related
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.
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
I know this question has been asked before, but I'm having some difficulty getting it to work in IE9. I have an html page with 3 forms in it (since each form contains a request to a different resource on a website). The html looks like this:
<form action="/SomeController1/Action" method="get"><button name="action" value="someValue">Request the first thing</button></form>
<form action="/SomeController2/Action" method="get"><button name="action" value="someValue">Request the second thing</button></form>
<form action="/SomeController3/Action" method="get"><button name="action" value="someValue">Request the third thing</button></form>
I'm trying to disable the blue glow that is showing up on all three buttons when the page loads. I think it looks really confusing...
The solution that I'm trying to implement, which doesn't seem to be working, is:
button
{
outline-width: 0px;
outline: none;
}
At any rate, the glow doesn't appear in Firefox or Chrome, it just seems to be appearing in IE. I suppose I could just use one form and put 3 buttons in it, but this seems a bit more like a workaround rather than a solution. Is there any way to do this using CSS or javascript? Any help will be appreciated!
Thanks!
Edit - Here's an image of the problem:
I was just hoping to get rid of the blue color.
You can't just get rid of it, because Internet Explorer uses the native buttons, from your system theme. Take a look at any system dialog box with a button, for example when you change your wallpaper.
You can only remove the blue inner glow if you're willing to style a decent looking button yourself, starting with setting a border/background (which disables using the native style).
with 'glow' you mean a border? in that case, just do;
button { border: 0; }
I don't have IE 9 to test---but generically in CSS, you should try
button:focus {
outline:none;
box-shadow:none;
}
Adapted from "Removing the blue glow from an HTML text input when selected".
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 .