I'm making my firs steps learning to code. I've been taken some courses on Internet and now I decided to continue learning from the experience while I build a Wordpress child theme.
The thing is that I made a summary. And when it's active it has a blue border.
I'm trying to remove it but I can't find a solution.
I tried suing this without success:
summary:active {
border:none;
}
Do you have some suggestion?
summary:focus{
outline: none;
}
The browser is rendering a border around the summary while it is on focus.
Problem: Its not the border but a outline that browsers render.
Solution: Set outline:none on the element.
So the code would be
summary:focus{
outline: none;
}
To remove it from all inputs
input {
outline: none;
}
To remove it from all tags use the universal selector *:
*:focus {
outline: none;
}
The problem is the input field, not the summary class itself. You can try removing it by using the following code:
input:focus{
outline:none;
}
Hope it helps
People have said to remove with outline: none, which will remove the outline.
However, from an accessibility perspective you should replace the outline with one that fits the brand guidelines.
The outline on an element's focus state is to ensure that someone can tell where they are. Not all users have a point-and-click device, and even if they do, they won't leave their mouse hovering over an element at all times. For field inputs it's worth keeping an outline or other focus style so users know which field they're in.
The A11y Project (accessibility project) has some useful information which covers what I've said.
I'd suggest that rather than doing:
summary:focus {
outline: none !important
}
You talk to the designer to come up a positive focus style, e.g.:
summary:focus {
background: #ffeeee;
color: #242424;
outline: none
}
If it is an input field try this
input:focus{
outline: none !important;
}
I was able to make the blue outline disappear in Safari 10 with:
summary {outline:none;}
Funny thing is that I can't change the specific color of the outline:
summary:focus{outline:red;}
Αlso removed the outline. Using solid and dotted all work as specified, and display it black.
But it looks like the blue color is hard-coded into focused input fields. The very text box I'm using right now has the same light blue outline. Maybe that can't be changed, but you can suppress its visibility or restyle it. You just can't specify a color.
*.no-outline > * :focus {
outline: none;
}
This would remove any the outline for any tag with class no-outline, and also it will remove outline for all its children.
Related
I'm using materializecss for my project but I have a problem.
I have disabled the outline of the inputs but the inputs still showing up a weird outline on focus.
This is the css for the inputs
.inputs input[type=text]:focus {
border: 1px solid #FFFFFF!important;
background-color: #FAFAFA!important;
box-shadow: none!important;
outline:none!important;
}
This is likely the :active pseudo class as it seems like the border is changing when you click.
Try making a rule that changes both the focus and active pseudo classes.
.inputs input[type=text]:active,
.inputs input[type=text]:focus {
border: 1px solid #FFFFFF!important;
background-color: #FAFAFA!important;
box-shadow: none!important;
outline:none!important;
}
I don't see a question here, but I am assuming you want to get rid of the outline altogether?
If you provide more details I'll be able to give more accurate answer, but first thing that comes to mind from looking at provided gif is that maybe that outline comes from an :active state.
You can remove outline for both states on the bare element and see if that has some impact:
input:focus,
input:active {
outline: none;
}
If this didn't solve your problem, please give some more input (pun intended :)) and we'll figure it out.
Best,
N.
P.S. Upon further inspection, it seems to me that when you click, the border is set. That's also why your input fields move a little bit (can you see that)? Please update your code. This should be trivial.
I have a div wrapped in a <a> tag like this...
<a href='/'><span>Quiz</span>
and then my css stylesheet looks like this...
a:visited {
color: green;
}
But when the link is visited, it looks like this...
I have tried defining the border settings in the a css selector in various ways with no luck. Any ideas on how to fix this?
This is not an outline, probably there is already a border on, either your span or your a. Now, if the border doesn't have a specific color set, e.g.
border: 1px solid;
instead of
border: 1px solid black;
then it's color is defined by the color property. Which means that what is happening is normal.
Now, you have two options, either you find where is this border defined and remove it or add a color to it. Or you override it in some way like:
a:visited {
color: green;
border-color:transparent;
}
you may need !important on the border-color rule but that depends.
Use outline instead of border to fix this.
Thanks
i think it will be better if you look into the style section of the safari inspection. There are certain browser default styles which behave in a similar way. If you find any outline or border declaration, try to neutralize that declaration by declaring from your end border: 0; outline: none;
It will be of real help if you could share with us the code over fiddle or codepen.
Note: I was unable to recreate the scenario as you specified.
I am facing with a strange problem.
I have a Wordpress site, with Mailchimp For Wordpress plugin. There is the email field, what has a required attribute. Around the field, there are a red border or something.
First i inspected this element, turn of all the css properties, border still there.
I was really wondering why. Then when I removed the required attribute, the border has gone. So i thought I am on the right way, and add this to my css:
:required {
border: none; outline: none;
}
That does not helped me out.
I visit this page: http://www.w3schools.com/cssref/sel_required.asp
But i do not see, what are the default declarations for this selector.
I also tried to search for required on w3.org wiki, no success.
So, of course my first question is how to remove that border, and the second is, where can I find the default declarations for required?
input[required], input:required {
display:block;
background-color: yellow;
border: 0 !important;
outline: none !important;
}
I tried to create buttons and insert my own images instead of the standard button images. However, the gray border from the standard buttons still remains, showing on the outside of my black button images.
Does anyone know how to remove this gray border from the button, so it's just the image itself? Thank you.
Add
padding: 0;
border: none;
background: none;
to your buttons.
Demo:
https://jsfiddle.net/Vestride/dkr9b/
This seems to work for me perfectly.
button:focus { outline: none; }
I was having the same problem and even though I was styling my button in CSS it would never pick up the border:none but what worked was adding a style directly on the input button like so:
<div style="text-align:center;">
<input type="submit" class="SubmitButtonClass" style="border:none;" value="" />
</div>
input[type="button"] {
border: none;
outline:none;
}
You can easily give this style to it:
MyButton {
border: none;
outline: none;
background: none;
}
The border: none; will also do the job for you separately without giving outline (Because: An outline is a line drawn outside the element's border. so when there is no border, outline property doesn't have any meaning on its own).
The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. so when you set its value to none, then it prevents your button having any color, image and etc....
For removing the default 'blue-border' from button on button focus:
In Html:
<button class="new-button">New Button...</button>
And in Css
button.new-button:focus {
outline: none;
}
Hope it helps :)
Try using: border:0; or border:none;
You can also try background:none;border:0px to buttons.
also the css selectors are div#yes button{..} and div#no button{..} . hopes it helps
Add this as css,
button[type=submit]{border:none;}
Just use:
button{border:none; outline:none;}
The usual trick is to make the image itself part of a link instead of a button. Then, you bind the "click" event with a custom handler.
Frameworks like Jquery-UI or Bootstrap does this out of the box. Using one of them may ease a lot the whole application conception by the way.
You can target the button in the CSS styling like so:
div button {
border: none;
}
$(".myButtonClass").css(["border:none; background-color:white; padding:0"]);
I am using this CSS to remove dotted borders which appear when hyperlinks are clicked
a:active, a:focus, input {
outline: 0;
outline-style:none;
outline-width:0;
}
This is working fine, but doesn't work on input buttons which have background images.
It's not my place to question your design decisions, so here you go.
Just add this to any link's you want to remove the dotted line
onfocus="if(this.blur)this.blur()"
It isn't working fine. It is rendering it impossible to navigate the design without a mouse.
See http://24ways.org/2009/dont-lose-your-focus for a reasonable compromise.
You could add an onclick: blur(); so it keeps it tab-happy and doesn't ruin the design when clicked.
But for the record, this seems to work cross browser. The first part for IE, the second for FF:
input, input:active, input:focus{
outline: 0;
outline-style:none;
outline-width:0;
}
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
border: none;
}
You need classes to differentiate which links have dotted borders and which do not. Using the img selector won't be enough.
Style your input tags to not have dotted borders; you could even use a class for your input buttons if you have more than one style (Clear, Submit, Cancel, etc.)