I have a button . When I click on it, some weird dotted lines show up like this which I cannot remove. Tried everything I know in CSS but cannot fix. Please Help.
Here is my css:
input.filterIcon {
width: 32px !important;
height: 32px !important;
background: url(../images/filter-icn.png) no-repeat center right !important;
padding: 0px !important;
cursor: pointer;
float: right;
vertical-align: middle;
margin: 0 0 0 10px !important;
font-size: 12px;
letter-spacing: 0.5px;
position: fixed;
z-index: 99999;
top: 70px;
right: 15px;
outline: 0 !important;
}
Here is my html
<form id="search_form">
<input type="button" class="filterIcon" id="iconfilter">
</form>
Anchor links ('s) by default have a dotted outline around them when they become "active" or "focused".
If you want it gone, and you want it gone on every single anchor link, just include this as a part of your CSS reset:
a, button {
outline: 0;
}
a:hover, a:active, a:focus {
/* styling for any way a link is about to be used */
}
Firefox Inputs Clicking down on an input type=image can produce a dotted outline
To remove it: input::-moz-focus-inner { border: 0; }
Source : https://css-tricks.com/removing-the-dotted-outline/
Difficult to determine without any additional info but try adding this to the button’s css
outline: 0;
Its because of outline, you can try this code.
button, button:hover, button:focus, button:active,
a, a:hover, a:focus, a:active {
outline: 0;
}
The dotted border is there for accessibility reasons as a visual clue of what has been selected (clicked on). You can get rid of this easily by adding this CSS to the elements (class name depends on the element):
.button {
outline: none;
}
outline on the Mozilla Developer Network:
The outline CSS property is a shorthand for setting various outline properties in a single declaration: outline-style, outline-width, and outline-color.
You can remove the outline with this code:
outline: none;
Related
As shown in the picture I applied a border radius for the select tag but when pressing on it the arrow button isn't taking the border radius.
(Only in Opera browser)
css:
.App select{
font-family: "Nunito", sans-serif !important;
font-size: 22px !important;
padding: 0.25rem;
border-radius: 0.5rem;
border: #dc3545 solid 1px;
outline: none;
padding-left: 15px;
}
Is there any solution for this?
The outline shown is most likely the :focus state. I would keep this on for accessibility reasons; some people physically cannot use a mouse, or simply prefer to navigate a page via the keyboard.
Knowing this, you can toggle the focus state with CSS:
:focus {
outline: none;
}
The Solution is simple, just give in:
.App select:focus {
overflow: inline;
outline: none;
How do i remove the blue background when active on an option and hovering on an option with my select dropdown.
Here is a screenshot of what i mean:
I have tried every css rule i could thin off and even search the internet, including here but nothing is working
.language {
float: right;
margin-top: -45px;
padding-right: 25px;
}
.language select {
width: 180px;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
cursor: pointer;
}
.language select::-ms-expand {
display: none;
}
.language option {
background-color: #000;
color: #fff;
}
.language option:hover {
background-color: #000;
color: #fff;
}
.language-selector::before {
font-family: "Font Awesome 5 Free";
content: "\f0ac";
visibility: visible;
font-weight: 900;
position: relative;
float: left;
margin-left: 1690px;
margin-top: -53px;
}
<div class="language">
<select>
<option value="">English</option>
<option value="">Deutsch</option>
</select>
</div>
Well, you can't. This is set by the OS. Sorry :/
Try this
:focus {outline:0 !important;}
and this
:hover {outline:0 !important;}
If this is not working try on ur own css style !importent this will overwrite all the normall css
Good luck :)
Usually you'd use background: transparent but you have to tell us the rule that's setting the blue color or if it's the OS/browser as someone else mentioned, tell us which OS/browser. Dropdown attributes can't always be styled as many are set by the browser (see the diff between them in Firefox and Chrome). The solution for complete style control is unfortunately to create your own dropdowns using a trigger and list of items you toggle visibility and handle the user's selection.
hi It's happend for me and this is mt solution {background: transparent !important;}
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'm using bootstrap to make some buttons containing images.
But when I click them, a strange horizontal line appears, as well as a dotted bounding box on FF.
i have tried outline: none;,but it doesn't change anything...
how can i re-arrange the html (or edit the css) to fix this? I don't want those boxes (especially the horizontal one in the middle)
thanks
html
<div class="button frontbutton col-md-4">
<a href="/tips">
<img src="url.png" class="buttonPic">
<span data-i18n="buttons.tips">Tips</span>
</a>
</div>
css
.frontbutton {
padding: 15px;
}
.button {
display: inline-block;
color: #444;
border: 1px solid #CCC;
background: rgba(210, 210, 210, 0.62);
box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
margin: 0px;
cursor: pointer;
vertical-align: middle;
text-align: center;
}
a {
color: #199ACE;
outline: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
img.buttonPic {
width: 95%;
}
thanks
https://jsfiddle.net/pLkyqz0x/
UPDATE
while making the fiddle, i noticed what caused the gray bar (box shadow on a:active)
but the red box on FF remains....
This is the a:focus { } style. So you can remove it by setting a:focus { outline: none; } however this is not considered best practice as the focus style is an accessibility requirement. You should instead redefine focus styles that work for you. (For further reading on why this is bad practice: http://www.outlinenone.com/)
I have css style:
#topmenu a:hover {
margin: 0;
padding: 8px 20px 7px 12px;
color: #FFFFFF;
text-decoration: none;
background-color: #48516D;
}
And then, I have a topmenu div with some <a> inside. I would like to disable the hover style on one of the elements, for example on this one:
<div id="topmenu">
<img width="85" src="/bundles/merrinmain/images/design/homepage.png">
How can I do this? Should I set the style="" to something else?
Thank you in advance.
You can't "reset" the styles, so to speak, on a specific element directly, but you could give it a class that is styled the same as the non-hovered links.
#topmenu a, /* apply to non-hovered links */
#topmenu a.noHover:hover { /* and apply to .noHover even when hovered */
margin: 0;
padding: 8px 20px 7px 12px;
color: fuchsia; /* yay */
text-decoration: none;
background-color: #48516D;
}
#topmenu a:hover {
margin: 0;
padding: 8px 20px 7px 12px;
color: #FFFFFF;
text-decoration: underline;
background-color: #48516D;
}
This way only links without the "noHover" class will have the hover effects applied. Note that you need to specify all the relevant properties that change (color, text-decoration etc.) in the first rule (for normal links and .noHover) in order to override the second :hover rule's properties.
Demo at http://jsfiddle.net/N8txa/
Apply another class to that item overwriting the inherited hover implementation
like css
a.mylink:hover {
margin: 0;
//some other styles
}
html
<a href="/" class="mylink">