On Firefox (at least), when we disable the border of a textarea, its bottom right corner is still visible. How can we remove it?
textarea:focus {
outline: solid;
}
textarea {
border: none;
}
<textarea>Hello</textarea>
You have to disables resizing behavior in this case
textarea {
border: none;
resize: none;
}
Try resize:none for textarea.
textarea{
resize:none;
}
Hope this works.
How can I remove the arrow appear in frone of tags input as shown in image
demo here: https://colorlib.com/polygon/gentelella/form.html
I see that on other page here, that the Daily active users '.tag' has the arrow that's been bothering you.
I suggest that you extend the .tag class and add the pseudo code for the arrow
ul{
&.timeline{
li{
.tag{
#extend .tag;
&:after{
/* add code for arrow here */
}
}
}
}
}
or
simply hide the tag by selecting a specific parent like this:
.tagsinput .tag:after {
display: none;
}
By using the inspector / developer console on your browser you can see that the arrow is generated by:
.tag:after {
content: " ";
height: 30px;
width: 0;
position: absolute;
left: 100%;
top: 0;
margin: 0;
pointer-events: none;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
border-left: 11px solid #1ABB9C
}
Inspector claims this is part of custom.min.css beginning at line 2,922.
This arrow was probably supposed to appear directly adjacent to the actual tag, but it looks like position:relative is missing from key elements as well as other aspects of .tag being re-defined throughout the CSS.
I have a div that I defined it as contenteditable (behaves like an input).
I'm trying to write something so I click with the mouse within the div:
On chrome: everything is OK, the cursor is located in the div.
On Firefox: strange behavoir, the cursor is located below the div. After you write something, it's fixed.
I'm trying to make firefox to work as chrome.
This is the link:
http://jsfiddle.net/h3WDq/730/
This is my div:
<div class="divAsInput" contenteditable="true"></div>
And this is the css:
.divAsInput {
word-break: break-all;
padding-top: 1em;
border: none;
padding-bottom: 0;
outline: none;
outline-style: none;
box-shadow: none;
border-bottom: 1px solid black;
}
Please open it on Chrome and Firefox and click the mouse withing the div..
Any help appreciated!
seems like firefox has some issue with the padding cause there is nothing inside the <div>at start.. what about you try with min-height http://jsfiddle.net/h3WDq/731/
.divAsInput {
min-height: 20px;
word-break: break-all;
border: 1px solid lime;
}
See this code example: http://jsfiddle.net/Z2BMK/
Chrome/IE8 look like this
Firefox looks like this
My CSS is
button {
padding:0;
background:#080;
color:white;
border:solid 2px;
border-color: #0c0 #030 #030 #0c0;
margin:0;
}
How can I change the code sample to make the button the same in both browsers? I do not want to use JavaScript based hyperlinks because they do not work with space bar on keyboard and it has to have an href URL which is not a clean way to handle things.
My solution, since Firefox 13
button::-moz-focus-inner { margin: -1px; padding: 0; border-width: 1px; }
Add this:
button::-moz-focus-inner {
padding: 0;
border: 0
}
http://jsfiddle.net/thirtydot/Z2BMK/1/
Including the border rule above is necessary for buttons to look the same in both browsers, but also it removes the dotted outline when the button is active in Firefox. Lots of developers get rid of this dotted outline, optionally replacing it with something more visually friendly.
To fix it on input elements as well add
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner
is simple perfect!
Corrected version of #thirtydot's answer:
button:: {
padding: 0px;
border: 0px;
}
button::-moz-focus-inner {
padding: 0px;
border: 0px;
}
Regarding Firefox 87:
button in button::-moz-focus-inner cannot be a class. (E.g. .mybutton::-moz-focus-inner does not work)
There must be a button { padding:0px; border: 0px; } style present as well (This style can be given per class).
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;
}