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>
html
(input type button disabled), on IPhone devices it's grey!
but I want it stay in the same style when it's disabled...
how to do that?
I tried use “-webkit-appearance: none;”
all (input type button) changed to my css,
but the disabled buttons is still grey...
even if I write "input:disabled{background-color:white}"
<style>
input{
display: block;
-webkit-appearance: none;
margin:5px;
border: 2px solid #000;
background-color: white;
}
input:disabled{
display: block;
border: 2px solid #000;
webkit-appearance: none;
background-color: white;
}
</style>
<body>
<input id="button1" type="button" disabled>
</body>
I want IPhone use the style I write...
on IPhone,https://imgur.com/a/OkTjzoa
on PC/Android,https://imgur.com/1miAJtZ
Problem solved!!
just set opacity to 1
input:disabled {
-webkit-appearance: none;
opacity:1;
}
You're just trying to get the disabled button to stay white? It might help for you to use the following string:
input:-webkit-autofill {
background-color: white !important;
}
The important tag will force the background to be white.
I am wondering if its possible to remove the default blue and yellow glow when I click on a text input / text area using CSS?
Edit (11 years later): Don't do this unless you're going to provide a fallback to indicate which element is active. Otherwise, this harms accessibility as it essentially removes the indication showing which element in a document has focus. Imagine being a keyboard user and not really knowing what element you can interact with. Let accessibility trump aesthetics here.
textarea, select, input, button { outline: none; }
Although, it's been argued that keeping the glow/outline is actually beneficial for accessibility as it can help users see which Element is currently focused.
You can also use the pseudo-element ':focus' to only target the inputs when the user has them selected.
Demo: https://jsfiddle.net/JohnnyWalkerDesign/xm3zu0cf/
This effect can occur on non-input elements, too. I've found the following works as a more general solution
:focus {
outline-color: transparent;
outline-style: none;
}
Update: You may not have to use the :focus selector. If you have an element, say <div id="mydiv">stuff</div>, and you were getting the outer glow on this div element, just apply like normal:
#mydiv {
outline-color: transparent;
outline-style: none;
}
On textarea resizing in webkit based browsers:
Setting max-height and max-width on the textarea will not remove the visual resize handle. Try:
resize: none;
(and yes I agree with "try to avoid doing anything which breaks the user's expectation", but sometimes it does make sense, i.e. in the context of a web application)
To customize the look and feel of webkit form elements from scratch:
-webkit-appearance: none;
I experienced this on a div that had a click event and after 20 some searches I found this snippet that saved my day.
-webkit-tap-highlight-color: rgba(0,0,0,0);
This disables the default button highlighting in webkit mobile browsers
Carl W:
This effect can occur on non-input elements, too. I've found the following works as a more general solution
:focus {
outline-color: transparent;
outline-style: none;
}
I’ll explain this:
:focus means it styles the elements that are in focus. So we are styling the elements in focus.
outline-color: transparent; means that the blue glow is transparent.
outline-style: none; does the same thing.
This is the solution for people that do care about accessibility.
Please, don't use outline:none; for disabling the focus outline. You are killing accessibility of the web if you do this. There is a accessible way of doing this.
Check out this article that I've written to explain how to remove the border in an accessible way.
The idea in short is to only show the outline border when we detect a keyboard user. Once a user starts using his mouse we disable the outline. As a result you get the best of the two.
If you want to remove the glow from buttons in Bootstrap (which is not necessarily bad UX in my opinion), you'll need the following code:
.btn:focus, .btn:active:focus, .btn.active:focus{
outline-color: transparent;
outline-style: none;
}
This solution worked for me.
input:focus {
outline: none !important;
box-shadow: none !important;
}
some times it's happens buttons also then use below to remove the outerline
input:hover
input:active,
input:focus,
textarea:active,
textarea:hover,
textarea:focus,
button:focus,
button:active,
button:hover
{
outline:0px !important;
}
<select class="custom-select">
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
</select>
<style>
.custom-select {
display: inline-block;
border: 2px solid #bbb;
padding: 4px 3px 3px 5px;
margin: 0;
font: inherit;
outline:none; /* remove focus ring from Webkit */
line-height: 1.2;
background: #f8f8f8;
-webkit-appearance:none; /* remove the strong OSX influence from Webkit */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/* for Webkit's CSS-only solution */
#media screen and (-webkit-min-device-pixel-ratio:0) {
.custom-select {
padding-right:30px;
}
}
/* Since we removed the default focus styles, we have to add our own */
.custom-select:focus {
-webkit-box-shadow: 0 0 3px 1px #c00;
-moz-box-shadow: 0 0 3px 1px #c00;
box-shadow: 0 0 3px 1px #c00;
}
/* Select arrow styling */
.custom-select:after {
content: "▼";
position: absolute;
top: 0;
right: 0;
bottom: 0;
font-size: 60%;
line-height: 30px;
padding: 0 7px;
background: #bbb;
color: white;
pointer-events:none;
-webkit-border-radius: 0 6px 6px 0;
-moz-border-radius: 0 6px 6px 0;
border-radius: 0 6px 6px 0;
}
</style>
I found it helpful to remove the outline on a "sliding door" type of input button, because the outline doesn't cover the right "cap" of the sliding door image making the focus state look a little wonky.
input.slidingdoorbutton:focus { outline: none;}
I just needed to remove this effect from my text input fields, and I couldn't get the other techniques to work quite right, but this is what works for me;
input[type="text"], input[type="text"]:focus{
outline: 0;
border:none;
box-shadow:none;
}
Tested in Firefox and in Chrome.
Sure! You can remove blue border also from all HTML elements using *
*{
outline-color: transparent;
outline-style: none;
}
And
*{
outline: none;
}
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.
I know this kind of question was asked at least 100 times but here is what I mean by CSS only:
I want to change style of checkbox/radio with CSS without beeing required to change markup of those elements ( putting them in container / adding label element etc ). I'm asking if it's possible to style <input type"checkbox"/> without adding any new html to it.
Such CSS could be added to any exisitng page and work. All solutions I've found requires some given type of markup and if you'd just add them to some page with forms it just will not work as they might not have labels or containers for inputs itself.
By modify I mean - changing style of box (main css like border-radius, colors, borders, shadows) and changing style of check (color, shape etc).
I know required markup can be added by JS - but it's not solution, it's workaround and I'm not looking for that.
it is not cross-browser solution
input[type="checkbox"]{
width: 30px;
height: 30px;
margin: 0;
padding: 0;
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
outline: none;
}
input[type=checkbox]:after {
content: "";
width: 30px;
height: 30px;
border: 2px solid #ccc;
margin: 0;
vertical-align: top;
display: inline-block;
border-radius: 50%;
}
input[type=checkbox]:checked:after{
background: #ccc;
}
<input type="checkbox" />