This question already has answers here:
How to remove the border highlight on an input text element
(21 answers)
Closed 5 years ago.
I use an <input> for which I style the border:
input {
font-size: 300%;
border-width: 10px;
border-style: solid;
border-radius: 30px;
}
<input>
The problem is that once <input> has the focus, a tiny blue border appears:
I do not see it anywhere in DevTools so I believe it is a property of <input> itself, which was not intended to have rounded borders (wildly guessing)
Is it possible to get rid of it?
You can remove it with outline:none, but it creates accessibility issues.
input {
font-size: 300%;
border-width: 10px;
border-style: solid;
border-radius: 30px;
outline:none;
}
<input>
that should work for you
textarea:focus, input:focus{
outline: none;
}
but this is already more detailed in the following link
How to remove border (outline) around text/input boxes? (Chrome)
input:focus {
outline: none;
}
Related
This question already has answers here:
How to remove the border highlight on an input text element
(21 answers)
Closed 2 years ago.
text input selection(.gif)
I make a text input box have rounded corners, but when I select it to type, a square selection box surrounds it.
How can I make the selection box to have rounded corners as well? Or is there a way to disable the square selection box that appears?
Thanks for your help.
What's showing up is the outline. The outline is a CSS property. It appears on elements that are in focus (such as an input being typed in). You can remove it if you like, but make sure to use border, box-shadow, or something else when it is focused. Adding a focus indicator is important for web accessibility. Here's an example of what is happening and a possible solution:
input {
border-radius: 10px;
}
#input2 {
outline: none;
}
#input2:focus {
border: 2px solid blue;
}
<input id="input1">
<br><br>
<input id="input2">
This substitutes border for outline. It's still accessible, but border respects border-radius.
Try this:
input {
border-radius: 5px;
}
input:focus {
outline-width: 0;
}
<input>
As #AlexH pointed out, you could also add other things to the input: focus to make it more accessible.
Example:
input{
border-radius: 5px;
outline: none;
}
input:focus{
border: 2px solid red;
border-radius: 10px;
}
<input>
Making it clean:
You can use #keyframes for an even better transition, and transitions, as they last longer, might be a more effective tool for accessibility (in my experience)
input{
border-radius: 5px;
border: 1px solid black;
}
input:focus{
animation: input 0.5s forwards;
border-radius: 7px;
border: 2px solid #55555;
outline: none;
}
#keyframes input{
from{
border-radius: 5px;
border: 1px solid black;
}
to{
border-radius: 9px;
border: 1px solid #555555;
}
}
<input>
This question already has answers here:
Enable :focus only on keyboard use (or tab press)
(11 answers)
Closed 3 years ago.
In my following minimal example I have a div that acts as a button. It has a tabindex, so if I use the tab key and get to the element, the style of the class .with-focus is applied. So far so good.
But I get the style of the class .with-focus as well when clicking with the mouse on the button. And this is what I do NOT want. Is it possible to avoid?
.with-focus[tabindex]:focus {
outline: 5px solid green;
}
.btn {
background-color: #eee;
border: 1px solid #ddd;
cursor: pointer;
height: 50px;
text-align: center;
width: 200px;
}
<div class="btn with-focus" tabindex="0" onclick="console.log('clicked')">
Button
</div>
I think you can use the :active substate, try adding this after the :focus selector
.with-focus[tabindex]:active {
outline: 0;
}
Codepen
This question already has answers here:
CSS Text underlining too long when letter-spacing is applied?
(8 answers)
Closed 5 years ago.
I have a link where the text has some letter-spacing. Now the bottom border goes further than the link because of that. How can I avoid that e.g. how can I make the bottom border fit to the link text?
LINK
css:
a {
letter-spacing: 3px;
font-size: 30px;
border-bottom: 2px solid orange;
text-decoration: none
}
FIDDLE
The only way to overcome this issue is to hack your way through it: by wrapping your text in a span we can remove 3px on the right with a negative margin:
a {
font-size: 30px;
border-bottom: 4px solid green;
letter-spacing: 3px;
text-decoration: none;
}
span {
display: inline-block;
margin-right: -3px;
}
<span>LINK</span>
This question already has answers here:
Element opacity but not border
(4 answers)
Closed 5 years ago.
my object is transparent but has a nice borders. Can I show only these borders in CSS or HTML?
I don't quite understand what you mean, you were pretty vague and didn't post any code. But if you are saying you want to keep the border but get rid of opacity I put some CSS code below that should help.
.btn {
border: 4 px;
border-color: black;
color: black;
padding: 14px 28px;
cursor: pointer;
font-weight: bold;
opacity: 1;
}
.bttn {background-color: white;}
.bttn:hover {background-color: #f2f2f2;}
If you are trying to keep your borders and use opacity set the opacity to 1. Or if you are trying to use an opacity less than one add something like so.
.bttn a {
border: 4px;
border-style: solid;
border-color: black;
}
Hope this helps.
Here I have a submit button:
<input type="submit" value="submit" />
And I want to add some additional styles to make it a flat look:
input {
border: 0;
background: none;
-webkit-appearance: none;
}
This is how it looks afterwards:
However, if you look carefully, there is still some border on the top of the submit button......
Is there some way to remove the sunken or raised surface and make it a plain flat look?
You will need to set border, box-shadow and background to 0/none to remove any greyish appearance as seen on button. Then to remove the rounded corners set border-radius to 0px.
Rules are :
input[type="submit"]
/* Or better yet try giving an ID or class if possible*/
{
border: 0;
background: none;
box-shadow: none;
border-radius: 0px;
}
outline: none; would be my first guess.
And also you would probably want to remove the :focus state and :hover state as so
input[type="submit"]:focus {
background:none;
outline: none;
border:none;
}
input[type="submit"]:hover {
background: none;
border: none;
outline: none;
box-shadow: none;
}
this makes it so when it is pressed, it won't have an emphasized outline.
if it doesn't work try removing other styles such as box-shadow:none;, border-radius:none;.
I see that the button corners are rounded. Maybe this is caused by other styles that affecting it. Try to remove the border-radius like this:
input {
border: 0;
border-radius: 0;
background: none;
-webkit-appearance: none;
}
If that didn't solve the issue, then you need to check what style that is adding the top border. You can try using CSS !important with the border declaration(not recommended btw) :
input {
border: 0 !important;
border-radius: 0;
background: none;
-webkit-appearance: none;
}
input {
border: 0 none hlsa(0,0%,0%,0);
outline: 0 none hlsa(0,0%,0%,0);
box-shadow: none;
background: none;
-webkit-appearance: none;
}
Even though outline isn't a browser default (AFAIK), in Bootstrap (if your'e using it or another simular framework) outline is applied even though it's not showing in computed style. I'm still looking for that question concerning that. Btw, I didn't add border-radius because I figure you might want rounded corners, and it shouldn't be a problem.