http://jsfiddle.net/fj5u5Lk3/
<input type="text"></input>
On focus, this field gets a blue border, by default. Where can I find the default value and color code of it? I want to add my own, but it gets overwritten. I want to remove it, but then want to add it back on, and can't without knowing the default values.
You can use input[type="text"]:focus:
input[type="text"]:focus {
outline: none;
box-shadow: 0px 0px 5px #61C5FA;
border:1px solid #5AB0DB;
}
input[type="text"]:focus:hover {
outline: none;
box-shadow: 0px 0px 5px #61C5FA;
border:1px solid #5AB0DB;
border-radius:0;
}
<input type="text"></input>
It's called outline property. You can set
outline: 0px;
to disable it. And, for example
p {
outline-style: dotted;
outline-color: #00ff00;
}
for some properties. You can read something here: http://www.w3schools.com/cssref/pr_outline-color.asp or just search "outline css property"
from W3Schools :
Focused Inputs
By default, some browsers will add a blue outline around the input when it gets focus (clicked on). You can remove this behavior by adding outline: none; to the input.
Related
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.
On a page when we tab across elements, they get focused and those elements get highlighted with some browser specific css.
Like on button when focused it shows like below screen shot.
Notice the white dotted line on button
I would like to show exactly similar when button is hovered
button:hover {
/*What should go here?*/
}
Is this what you're looking for? http://jsfiddle.net/Screetop/tpx5tyxc/
As mentioned by the others, take a look at the outline property. Also the box-shadow simulates a border around your button.
<button>Submit</button>
button {
display: block;
background: grey;
padding: 5px;
border: none;
box-shadow: 0 0 0 3px grey;
}
button:hover {
/*What should go here?*/
outline: 1px dotted white;
}
button:focus {
outline: 1px dotted white;
}
There’s the CSS outline property, but it won’t render inside the element. If we use a simple border for the dotted line, we nee to get some spacing between the dots and the visible border. Perhaps using box-shadow? Try this:
button{
width:140px;
height:36px;
color:#FFF;
background-color:#555;
border:1px dotted #555;
border-radius:2px;
box-shadow: 0 0 0 4px #555;
}
button:hover{
border-color:#FFF;
}
how can we adjust the border radius of the input field focus.
HTML
<input type="text" class="rest" />
CSS
.rest{border-radius:15px;border:1px solid red;}
Removed the standard outline (which does not accept border-radius) and used a blue box-shadow instead:
.rest{
border-radius: 15px;
border: 1px solid grey;
padding-left: 8px;
}
.rest:focus {
outline: none;
box-shadow: 0px 0px 2px #0066ff;
}
<input type="text" class="rest" />
codepen demo
use the :focus pseudo selector
.rest:focus{
border-radius:0;
}
DEMO
You have to disable the outline of the element focus state:
*:focus { /*OR .rest:focus*/
outline:none;
}
Here is a FIDDLE
If you want the border-radius on the browser default focus outline you can do it only on firefox with -moz-outline-border:5px; , but this will only work on FF, however the request to implement a similar feature in WebKit was closed as WONTFIX, The plan for the future is to make the outlines follow the borders.
The other answers have covered the solution, however, the supplied CSS styles do not accurately reproduce the blue ring color or size. For example, replacing:
:focus {
outline: -webkit-focus-ring-color auto 5px;
}
With the solutions provided, results in a purple-tinted blue
before and after pic. Instead, try this color:
.rest:focus {
outline: none;
border-radius: 8px; /* Your border radius here */
box-shadow: 0px 0px 1px rgba(0,100,255,1),
0px 0px 2px rgba(0,100,255,1),
0px 0px 3px rgba(0,100,255,1); /* #0064FF */
}
Removing the default outline when input is in focus and adding a border that should match the border radius of the default state of input
.rest:focus {
outline: none;
border: 1px blue solid;
}
I have a textbox of which by I removed the default borders using outline:none; However, when I add a background-image the border is shown and can't be removed!
How do I get rid of this? Here is the box:
<input type = "text" placeholder = "Username" class = "txt_input">
and the css:
background: url('images/user-icon.png') left no-repeat;
margin-bottom: 5px;
box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.5);
font-family: 'ProximaNova-Bold';
outline: none;
width: 200px;
height:30px;
text-align: center;
text-transform: capitalize;
padding:15px;
padding-left:21px;
add a border: 0px none; to your css? The outline handles only the focus border.
Use border:none instead of outline:none. Also, to capitalize text, use text-transform:uppercase. Note: you will remain with a little border, because of the box-shadow you applied. Removing this also will leave you with no border.
Cheers.
I think border: transparent; is better choice.
You have tried this border:0; on your CSS style??
i use 'vscode' and on mine i had to combine (below)
*
border: none;
outline: none;
*
copy that and it should work hopefully