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;
}
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>
Hi I'm designing a website and run into trouble on my css I'm kinda new on this css thing and its kinda weird that the css rule I made for input text is not working correctly on my text area here is my css
input[type="text"], textarea {
background: rgba(255,255,255,0.3);
border: none;
border-radius: 4px;
padding: 2%;
color: white;
}
input[type=text]:focus, textarea:focus {
box-shadow: 0px 1px 1px #f2dede inset, 0px 0px 8px #dff0d8;
}
and this is how it looks like on the browser
the text field Name has the correct glow but its weird that the textarea is not considering that they both have the same rule as what I pasted on my code above..
Try setting the following:
input[type=text]:focus, textarea:focus {
box-shadow: 0px 1px 1px #f2dede inset, 0px 0px 8px #dff0d8;
outline: none;
}
Some browsers set an outline on inputs, text areas etc on focus automatically and this most probably is the cause of your problem. Setting the outline to none should remove this behaviour.
this is because input has default style,when set your style,you can reset focus style:
*:focus {outline: none;}
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;
}
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.
I have this issue with <input type="text">where I see some extra border in top and left of the input box.
I have this CSS code -
#add{
width: 60%;
height: 25px;
margin: 0 auto;
border: auto;
border-radius: 10px;
}
I am attaching the screenshot from chrome. Firefox shows the same thing.
Try
#add{
width: 60%;
height: 25px;
margin: 0 auto;
border: none; /* <-- This thing here */
border:solid 1px #ccc;
border-radius: 10px;
}
By setting it to border:none the default css of the text field will be gone and your ready to style it for yourself.
Demo
#add {
width: 60%;
height: 25px;
margin: 0 auto;
border: 1px solid black;
border-radius: 10px;
}
Border auto is doing that for you. So have your own defined border style.
I noticed in Chrome that the user agent style that causes this specific look is border-style: inset; You can see it in the snippet below. Chrome is handy about indicating the user agent styles. I found two ways to fix this appearance.
Simply set border: 1px solid black; and you notice that the border will lose that inset look.
If you want extra caution, you can set border-style: none; This will cause the border to disappear altogether. You can then set the border as you wish.
I would test any of these solutions across different browsers.
Chrome User Agent Stylesheet:
input {
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
cursor: text;
padding: 1px;
border-width: 2px;
border-style: inset; /* This rule adds the inset border */
border-color: initial;
border-image: initial;
}
By setting the border: none; will override/nullify the default input css of the text field and then you can add your own custom css to beautify the input text element like so:
border: none; /*removes the default css*/
border: 1px solid black; /*your custom css*/
border-radius: 10px; /*your-border radius*/
However the above method is unnecessarily tedious whereas you could achieve the same result in just a single line with:
border-radius: 10px !important; /*this simply does the trick!!!*/
**Note:** The !important property in CSS is used to provide more weight (importance)
than normal property. It means that “this is important”, ignore all the subsequent
rules
<input type="text" style="border-radius: 25px;" /> 100% works
Try this thing