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.
How to remove the difference displaying buttons in Firefox and Chrome?
Case:
jsfiddle
You must reset the styles for Fx' -moz-focus-inner pseudo-element:
.btnViolet::-moz-focus-inner {
padding: 0;
border: none;
}
Here is a fixed fiddle: http://jsfiddle.net/kizu/XTjtg/25/
Most solutions posted for this have accessibility problems - they completely remove the focus outline.
To fix the padding but have the focus work the same as other links, try this:
button::-moz-focus-inner {
padding: 0;
border: none;
}
button:-moz-focusring {
outline: 1px dotted ButtonText;
}
I'm trying to remove the pressed effect from button on IE9. In all other browsers I have no problems.
Please take a look to the code
HTML
<button class="fancy">howdy!</button>
CSS
.fancy {
width: 60px;
height: 30px;
position: relative;
top: 0px;
margin: 0;
padding: 0px;
display: block;
border: none;
padding: 0;
color: #FFF;
font-size: 11px;
background: green;
outline: none;
overflow: hidden;
line-height: 11px;
}
.fancy:active,.fancy:focus
{
padding:0px;
margin:0px;
border: none;
outline:none;
text-indent: 0;
line-height: 11px;
}
Working demo http://jsfiddle.net/MDfvE/
As you can see, when you click the button on IE9 you will see that the text is moved to the right and bottom. I want to remove that.
Any clue? Thank you!
IE only recognizes the :active pseudo class when the element is an anchor.
http://msdn.microsoft.com/en-us/library/cc848864%28v=VS.85%29.aspx
Try changing the button element to an anchor tag and adjust the styling to recreate the look you had for your button.
It's a browser behaviour, a simple solution is to use a link tag instead of button (if its triggering a javascript function).
<img src="myimg"/>
If you still want to use the <button>, I've found that there are some characteristics on each browser (in a simple debug):
Chrome adds outline and padding
Firefox adds a whole lot of stuff with the standart button border
IE messes with the inner text position
So to fix them, you have to manipulate the pseudo selectors for the button behaviour. And for IE, a good solution is to envolve your text on a element, and make it relative positioned. Like so:
<button type="button" class="button"><span>Buttom or Image</span></button>
<style>
button,
button:focus,
button:active{
border:1px solid black;
background:none;
outline:none;
padding:0;
}
button span{
position: relative;
}
</style>
Pen
I want to style a form in html using CSS. It's a really simple form, so I didn't expect to have any problems with accessing it with CSS selectors. But anyway, when I am trying to add something like:
#maincontent #left_side #comments{
margin: 100px;
}
or
#comments{
margin: 100px;
}
I see no visible effect.
Sorry, I think I am not very descriptive, but not sure how to describe the problem...
Maybe you could take a look at the demo url here:
http://chess-advices.com:8000/article/ololo/
And suggest how to fix my CSS, to pretify the form? (Well I actually just need to access it first)
Thanks in advance
You forgot to close this:
div.pagination span.disabled {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #f3f3f3;
color: #ccc;
display:none;
change this to:
div.pagination span.disabled {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #f3f3f3;
color: #ccc;
display:none;
}
To find this: Line 267 in your style.css or you can use strg/cmd + f to find it...
But i think, if you add something like this:
form label { width: 100px; display: block; float: left; }
form p { padding: 5px 0px 0px 0px; }
your form would look nicer :)
I hope this is the answer of your question...
There is an error earlier in the css file that causes this. There is no closing bracket on the style div.pagination span.disabled style, that makes the browser skip the rest of the css file.
Note: as an id is unique in a page, you only need #comments to target the element. The only reason to use #maincontent #left_side #comments would be if you need to make it more specific to override some other style, or if you use the style sheet for several pages and there can be other elements with the id comments that you don't want to target.
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;
}