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.
Related
I want to remove the borders of the last row so it just seems like a gap. Any suggestions? Thank you!
Remove the border of the last row's cells
tr:last-of-type td {
border: none;
}
If you want it to look like a gap, use pseudo-selectors
table tr:last-child td{
border: none;
}
You can use the nth element of a particular type using the nth-of-type pseudo-selector.
<style>
tr:nth-of-type(n){
border: 0px;
}
</style>
Although it is not advisable to use a style tag in your HTML. You can always use a separate CSS file.
Alternatively, for the first and the last element, first-of-type and last-of-type can also be used.
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'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'm trying to make a navbar as an exercise.
I'm using a:hover to include a solid border around the button being hovered. However, this makes all the other buttons move by the size of the border.
What is the proper fix to this problem? I know there are others (discussed here), I specifically tried to make the border "be invisible yet take up space even when not hovered". I set border:transparent hoping it might do what I want, but it did not show take space at all.
I know I could hand pick the border's color to be equal to the background and make it solid, but this is not what I want. Is there a sane way to solve this issue?
How about border: 10px solid transparent ?
Your best option would be to add padding or margins to your element that's the same size as the border and make the border have zero width, and then show the border and remove the padding with the a:hover selector.
Here's a sample. You can often do this with margins too.
a {
display: inline-block;
height: 2em; width: 100px;
padding: 2px;
background: #0ff;
}
a:hover {
padding: 0;
border :2px solid #000;
}
Hello World
One reason this isn't working as you'd expect is because you are only applying display:block on :hover, it needs to be applied to the element without the :hover selector or you will get the "shifting" dimensions. It doesn't matter which display type you use, you just have to make sure they are the same, and by default <a> is inline.
Another reason has something to do with your shorthand borders, you need to add a border type for the transparent version like solid instead of none.
The technique you are using is totally legit, no need for padding hacks or outline (which doesn't add dimension).
http://jsfiddle.net/Madmartigan/kwdDB/
Try this:
#wd-navbar li a {
border: medium solid transparent;
display: block;
margin: 1px;
}
#wd-navbar li a:hover {
background-color: #F5DEB3;
border: medium solid;
}
border:transparent means border: transparent 0 none
If you don't specify a property when using shorthand syntax then you reset all the properties to their defaults.
You need to give it a border-style and a border-width.
You could use the outline CSS property instead of your border, which acts like a border but isn't taken into account in the sizing calculations.
However, this does have some issues, not being supported by IEs 7 or earlier.
Setting border-color : transparent ; does the job.
a {
border-color : transparent ;
}
a:hover {
border-color : black;
}
use pseudo elements ::after and ::before to ceate invisible boundaries.
Please note that transparent border is just useful when you don't have any box-shadow on the element. Have a look at the image: