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;
}
Related
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.
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 wanted to apply outline-style: none; to all my buttons in my html page. I created a class:
.outlineNone {
outline-style: none;
}
and assign the class to all my buttons. But it seems not be working. It seems to be only working when I apply the style inline with my html.
Can anyone explain to me why this is happening?
To clarify, I want to get rid of the blue rectangle that appears after you click on a button like the image below:
instead outline-style just use outline, plus you can reset the button style even more by setting border to 0
like this:
.outlineNone {
outline:0;
border:0;
}
Try with:
.outlineNone {
outline-style: none !important;
}
It seems to be a problem with some other structure which is modifying the outline-style that has bigger priority than just a class. (it can be an ID or the Button class itself)
I want to add pagination to one of my websites, but I have multiple problems with it, probably due to the fact that I don't have the best CSS skills in the world (they're mediocre at best).
You can see an SSCCE of my problem here: http://jsfiddle.net/rmurzea/qE7Ku/3/
1). To make the margin-bottom rule work, I had to add it to the pagination a class. If I add it directly to the pagination class, it doesn't work. Why ?
2). The content a:hover property has a text-decoration: underline rule. I can't seem to override it in pagination a:hover. How can I do it ?
3). I want that block of color and its text on the next line, but specifying a display: block rule doesn't seem to work.
Can anyone please help me with these problems ? Thank you in advance.
1) it works
.pagination {
margin-bottom: 20px;
}
2) Use !important in your css
.pagination a:hover {
text-decoration: none !important;
background-color: #5D4137;
color: #FFFFFF;
}
3) Replacing your p tag by div should work but it didn't, however I used a div with clear: both and it worked..
Here is your jsfiddle updated
I have this rule
input{
border: 1px solid #E5E5E5;
}
Here is my jsfiddle
which is needed on most of the site but is messing up some button styling...I thought that adding border: none would overwrite this but it didnt. I cant remove the input styling because its needed sitewide...any workarounds
You could use the :not selector to skip the specific inputs whose default borders you want to keep.
input:not(#submit-me) {
border: 1px solid #E5E5E5;
}
http://jsfiddle.net/S4XST/2/
Perhaps you should consider improving the border as well instead of just using the default.
The border isn't being shown in your fiddle, which is correct.
CSS has very clear rules on the priority given to selectors. An ID-level selector has higher priority than a tag-level selector, so #submit-me should override input.
This is exactly what is happening in your fiddle, and exactly what you want to happen, so I can't quite see what the problem is.