I'm trying to remove the following shadow from a select when it's focused:
I've set:
select {
border: none;
box-shadow: none;
-webkit-box-shadow: none;
outline: none;
-webkit-appearance:none;
-moz-appearance:none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
HTML:
<select />
But those don't work. Any suggestions?
Use the following style:
select:focus {
outline: none;
}
Or this, for all form elements:
input:focus,
select:focus,
textarea:focus {
outline: none;
}
the solution for me was:
box-shadow: none !important;
Somehow it wasn't taking the box-shadow I've set before adding !important
Now it's not showing the "glow" anymore.
Thanks for the replies anyway,
Dem
Related
Here's a gif that I've screen recorded on my device where you can see the blue-box-fill that I'm talking about:
I've tried doing this:
* {
user-select: none;
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
};
button,
button:active,
button:focus {
outline: none;
};
But it doesn't do the trick of getting rid of that blue-box-fill, since it's not really a focus border or outline.
The property you're looking for is tap-highlight-color
-webkit-tap-highlight-color: transparent;
I'm guessing this is happening on iOS?
This should prevent the blue box from appearing:
-webkit-tap-highlight-color: transparent;
I think you want like this ..
button {
margin: 10px;
padding: 10px;
height: 50px;
width: 50px;
background: #0095ff;
border: none;
border-radius: 40px;
cursor: pointer;
color: white;
}
#btn2 {
outline: none;
}
<button id="btn1">Click</button>
<button id="btn2">Click</button>
It's work only in Chrome:
:focus {
outline: 0;
}
Try one of these:
*:focus {
outline: none;
}
or
input:focus{
outline: none;
}
input:required {
box-shadow: none;
}
input:invalid {
box-shadow: none;
}
<input type='email' placeholder='email' required />
I'm working on an online eBay profit forecasting calculator here
I can't seem to get the input fields to work in safari and mobile safari. They work fine in FF & Chrome. I click into them, but nothing shows when I type. I've been searching google but can't seem to find any clues. I'm wondering if I'm missing something in the css. Here's my css for the input fields:
input {
width: 155px;
padding-left: 5px;
height: 24px;
cursor: text;
font-size: 18px;
font-weight: bold;
border: none;
border-radius: 3px;
box-shadow: inset 1px 1px 2px black;
-moz-box-shadow: inset 1px 1px 2px black;
-webkit-box-shadow: inset 1px 1px 2px black;
background-color: #F8FBEF;
}
Your problem lies in calcstyle.css here:
* {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
I'm not entirely sure why user-select: none; would prevent you from typing into an input but removing this block fixes it for me.
EDIT
Here is a possible solution:
Select everything but your inputs...
*:not(input.field) {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
This still seems to be a problem with Safari 9.0.3 and iOS 9.2. What finally fixed it for me was to set it to text:
input, textarea {
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
1: http://i.stenter code
i want to remove left side of user group tab sharp sized border. i want to remove that small gap of white in left side of user group tab
This is the css applied for selected tab.
ul.tabs li.selected a {-moz-border-bottom-colors: none;-moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: none repeat scroll 0 0 white; border-color: #B7B7B7 #B7B7B7 White; border-image: none;
border-style: solid; border-width: 1px; font-weight: bold;
position: relative; top: 0;}
ul.tabs li a {-moz-border-bottom-colors: none; -moz-border-left-colors: none;
-moz-border-right-colors: none; -moz-border-top-colors: none; background: none repeat scroll 0 0 #D8DAE2; border-color: #CCCCCC #CCCCCC #B7B7B7; border-image: none;
border-style: solid; border-width: 1px; color: Black; font: 11px verdana,helvetica,sans-serif;enter code here outline: medium none; padding: 5px 16px;
position: relative; text-decoration: none; z-index: 1;}
Make a change to your css:-
ul.tabs li.selected a {
top:1px; //change
}
if you are using jquery ui, the margin right is on the li element, not on a.
So your code should look like:
ul.tabs li { margin-right:0 }
if still not working, add
ul.tabs li { margin-right:0 !Important; }
I just stumbled upon css specificity, while trying to change the pagination style of my theme.
I'm using twitter-bootstrap as a base-template, but I want to change pagination.
Specifically, I want to remove the pagination border that comes with will-paginate bootstrap :
The will-paginate/bootstrap
.pagination a {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #DDDDDD;
border-image: none;
border-style: solid;
border-width: 1px 1px 1px 0;
float: left;
line-height: 34px;
padding: 0 14px;
text-decoration: none;
}
I just need this :
.pagination a {
float: left;
line-height: 34px;
padding: 0 14px;
}
The problem is that if i set this in my custom.css.scss file, then bootstrap specificity is higher (check this great explanation on specificity) than mine. I even tried and use !important, but it still did not got my specificity higher.
I have solved this problem by just using the Equal specificity rule - the one that comes last, with equal specificity, is the one that counts, and just put :
.pagination a {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #DDDDDD;
border-image: none;
border-style: none;
border-width: 1px 1px 1px 0;
float: left;
line-height: 34px;
padding: 0 14px;
text-decoration: none;
}
But this is just trashy css, because i don't need the border at all...
What would you suggest?
Just try border: none; instead of resetting every sub-property.
Also, I just checked Bootstrap's selector for pagination and it's more specific than that:
.pagination ul > li > a, .pagination ul > li > span
Try using that selector instead for your border: none.