I have been trying to remove this border that is on the default input in html. I have tried removing border, padding, making border transparent, ect but I cannot seem to change it. How can I remove it?
If you mean the border that appears when the input is focused :
input:focus{
outline: none;
}
border:0 should do the trick, but if it isn't working try disabling the outline by using outline:none
Or you can disable the appearance e.g -webkit-appearance:none
Also try applying a transparent color to the border, border-color:transparent.
One of this should do the trick.
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 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 am new to CSS. I created a button and I given border-radius to 18px. Everything looks fine, but when I click on that button it showing orange color border as follows. How Can i remove that ?
Outline: none;
That should fix this.
outline: none; will fix this issue
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've managed to manipulate most of the twitter widget's css but I can't seem to remove the black border around the whole widget and there seems to be a much thicker border on the bottom of the widget which I also want to remove. I'm using Chrome to test this.
Here is the jsfiddle.
The "border" is actually a background color which is shining through because you have a 1px padding on .twtr-bd, so the background color of .twtr-bd is not erasing the black background from the parent element.
Either remove the background color, or remove the padding.
give backgeound-color:white like this:
#twtr-widget-1 .twtr-new-results, #twtr-widget-1 .twtr-results-inner, #twtr-widget-1 .twtr-timeline {
background:#FFFFFF !important;
}