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 />
Related
I wanted to customize the look of default browser sliders with CSS. If I write selectors for different vendors (moz and webkit) with a separator, WebKit doesn't detect the selector. Is this a bug or I'm missing something?
This doesn't work:
input {
-webkit-appearance: none;
appearance: none;
}
input::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
background-color: red;
}
/* Multiple selection */
input::-moz-range-thumb,
input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
background-color: red;
height: 10px;
width: 10px;
cursor: pointer;
}
<input type="range" />
This Works:
input {
-webkit-appearance: none;
appearance: none;
}
input::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
background-color: red;
}
/* No multiple selection */
/*input::-moz-range-thumb,*/
input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
background-color: red;
height: 10px;
width: 10px;
cursor: pointer;
}
<input type="range" />
tihs is the effect when you hover you mose over matstepper
not able to figure how to disable this effect
want to remove ripple effect or focus effect or scrollable affect from mat-stepper
please help me out here
i have tried all the methods
not able to figure it out like ripple effect transparent and on-focus indicator
.stepper-qre {
background: #F5F6F7;
height: 88%;
}
.mat-horizontal-stepper-header-container {
width: 65% !important;
margin-left: 16.5%;
/* display: -webkit-box !important; */
}
.mat-stepper-label-position-bottom .mat-horizontal-stepper-header {
padding: 24px 0px !important;
}
::ng-deep.mat-stepper-label-position-bottom.mat-stepper-horizontal-line {
top: 34px !important;
}
.mat-stepper-label-position-bottom .mat-horizontal-stepper-header .mat-step-label {
position: fixed;
margin-top: 1%;
}
.stepper-qre.mat-step-icon-selected {
background-color: #2699FB !important;
color: white !important;
}
.stepper-qre.mat-step-icon-state-done {
background-color: #2699FB !important;
color: #fff !important;
}
.stepper-qre.mat-step-header .mat-step-icon {
background-color: #C4C6CC !important;
color: #fff;
}
::ng-deep.mat-step-icon {
height: 20px !important;
width: 20px !important;
}
.mat-step-icon.mat-step-icon-state-notcompleted {
background-color: #C4C6CC !important;
}
#activebutton:focus {
border: none !important;
outline: none !important;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
::ng-deep.mat-step-header.mat-step-header-ripple {
background-color: transparent !important;
}
.mat-ripple-element {
transition-duration: 0ms !important;
}
There's a disableRipple property available for the stepper component, as per the API.
Modified the official stackblitz example to demonstrate.
.mat-step-header:hover{
background-color: white !important;
}
.mat-step-header.cdk-program-focused {
background-color: white;
}
.mat-step-header.cdk-mouse-focused{
background-color: white;
}
.mat-step-header.cdk-focused{
background-color: white;
}
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
When I visit the bootstrap examples page here: http://getbootstrap.com/javascript/#tabs
I can click on the tabs and a blue focus outline (in chrome) does not appear. This is the behaviour I want. The same interaction (clicking a tab) in my application shows the blue outline.
I know there are several easy fixes (Bootstrap's Togglable Tabs - Removing outline / focus ?) to this problem (changing the css to outline: 0 for anchors), but what I can't figure out is why the bootstrap example works (doesn't outline after clicking) and mine doesn't. When I select the tabs anchor tag in dev tools, this is the css I see applied:
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
.nav-tabs>li>a:hover {
border-color: #eee #eee #ddd;
}
.nav>li>a:focus, .nav>li>a:hover {
text-decoration: none;
background-color: #eee;
}
.nav>li>a:focus, .nav>li>a:hover {
text-decoration: none;
background-color: #eee;
}
.nav-tabs>li>a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
.nav>li>a {
position: relative;
display: block;
padding: 10px 15px;
}
a:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
a:focus, a:hover {
color: #23527c;
text-decoration: underline;
}
a:focus, a:hover {
color: #23527c;
text-decoration: underline;
}
a:active, a:hover {
outline: 0;
}
a {
color: #337ab7;
text-decoration: none;
}
a {
background-color: transparent;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
user agent stylesheeta:-webkit-any-link {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
user agent stylesheet:focus {
outline: -webkit-focus-ring-color auto 5px;
}
Of particular interest is that 'a:focus' specifies the outline attribute, yet I don't see the outline after clicking the tab. I've also verified that the anchor is set to focus. If I use the "Toggle Element State" feature in Chrome Dev Tools and check "focus", the blue outline appears.
The styles applied to my application's bootstrap tabs are the same, yet I see the blue outline after clicking the tab.
I ran into this same issue too. Odd how it only happens on certain browsers. I didn't have this issue with Chrome or Safari but it was happening on Firefox and IE11. This is what worked for me.
.navbar-default .navbar-nav>li>a {
outline: none;
}
I have created a number of mixins to speed up setting anchor properties for each state. In this example I have a mixin for text-decoration and another for background-color.
.link-text-decoration(#default, #hover, #active, #visited)
{
text-decoration: #default;
&:hover
{
text-decoration: #hover;
}
&:active
{
text-decoration: #active;
}
&:visited
{
text-decoration: #visited;
}
}
.link-background-color(#default, #hover, #active, #visited)
{
background-color: #default;
&:hover
{
background-color: #hover;
}
&:active
{
background-color: #active;
}
&:visited
{
background-color: #visited;
}
}
When rendering as CSS I find instead of merging the pseudo classes it redeclares another.
LESS CSS calling the Mixins
.link
{
.link-text-decoration(underline, none, none, underline);
.link-background-color(#fff, #ccc, #ddd, #fff);
}
The Result
There a 2 instances of hover, active and visited.
.link {
text-decoration: underline;
background-color: #ffffff;
}
.link:hover {
text-decoration: none;
}
.link:active {
text-decoration: none;
}
.link:visited {
text-decoration: underline;
}
.link:hover {
background-color: #cccccc;
}
.link:active {
background-color: #dddddd;
}
.link:visited {
background-color: #ffffff;
}
Desired Result
Ideally I would like the values to appear as below as this would be much more efficient.
.link {
text-decoration: underline;
background-color: #ffffff;
}
.link:hover {
text-decoration: none;
background-color: #cccccc;
}
.link:active {
text-decoration: none;
background-color: #dddddd;
}
.link:visited {
text-decoration: underline;
background-color: #ffffff;
}
I've played with the Extend function and the examples on CSS Tricks, but this does not seem to work for this scenario.
Any solution, guidance, or advice?
Thanks,