Bootstrap li item remeins highlighted in white after visited

I am facing the problem when the Bootstrap item is remaining white background color after being visited. Here is the Html

.my-mail{

    background-color: transparent;

    cursor:pointer ;

}





.nav-mail:hover:not(.active){

    border-left: #007f7e 1px solid;

    border-right: #007f7e 1px solid;

    color: #007f7e;

    /*background-color: transparent;*/

    cursor: pointer;

}

.nav-mail:active{

    color: white;

    cursor: text;

    /*background-color: transparent;*/

    border-left: transparent 1px solid;

    border-right: transparent 1px solid;

    border-left: none;

}

.nav-mail:visited{

    /*color: white;*/

    cursor: text;

    background-color: transparent;

    border-left: transparent 1px solid;

    border-right: transparent 1px solid;

}

.nav-logo:hover{

    cursor: pointer;

}

.nav-mail-icon{

    font-size: 15px;

    background-color: transparent;

    cursor: pointer;

}

a:active {

    background-color: transparent;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<nav id="navbar" class="navbar navbar-fixed-top">

    

    <div class="container-fluid" >

        <div class="navbar-header">

            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

            </button>

            <a class="nav-logo" href="#1"><img class="img-responsive header-logoIMG center-block" src="Images/header/LOGO.png"></a>

        </div>

        <div class="collapse navbar-collapse" id="myNavbar">

            <ul class="nav navbar-nav navigation" id="myList">

                <li  class="nav-btn active"><a href="#1">Home</a></li>

                <li class ="nav-btn"><a href="#2">About Us</a></li>

                <li class ="nav-btn"><a href="#3">Our projects</a></li>

                <li class ="nav-btn"><a href="#4">Cooperation</a></li>

                <li class ="nav-btn"><a href="#5">Services</a></li>

                <li class ="nav-btn"><a href="#7">Contacts</a></li>

                <li class = "nav-item my-mail"><a href="mailto:MyEmail@gmail.com" class="nav-mail"><i class="glyphicon glyphicon-envelope nav-mail-icon"></i></a></li>

            </ul>

        </div>

    </div>

</nav>

In the code above instead of MyEmail link I have my real email. This is the only item that remains highlighted after being visited. I am sure it has something to do with the bootstrap navbar as I have another element with same link mailto and it works fine.

If you have any Ideas what is wrong, please help.
If youll follow the example:https://jsfiddle.net/borovec/aq9Laaew/272810/

you can see that there is a same problem if youll open the menu and press on any item except home, it will remain the white background color.

Thanks in advance!

edited Nov 16 '18 at 9:04

asked Nov 16 '18 at 8:50

boandriy

231315

Please create a plunker or jsfiddle example and paste here so we will get exact clarity.

– Laxminarayan
Nov 16 '18 at 8:58

try .my-mail a:visited {background-color: transparent;}

– Manish Patel
Nov 16 '18 at 8:59

1

Also explain what exactly you mean by “after being visited”. Are you talking about the :focus style here? (.nav>li>a:focus {background-color: #eee} from nav.less Bootstrap stylesheet.)

– misorude
Nov 16 '18 at 9:00

1

created example: jsfiddle.net/borovec/aq9Laaew/272810

– boandriy
Nov 16 '18 at 9:05

add a comment |

I am facing the problem when the Bootstrap item is remaining white background color after being visited. Here is the Html

.my-mail{

    background-color: transparent;

    cursor:pointer ;

}





.nav-mail:hover:not(.active){

    border-left: #007f7e 1px solid;

    border-right: #007f7e 1px solid;

    color: #007f7e;

    /*background-color: transparent;*/

    cursor: pointer;

}

.nav-mail:active{

    color: white;

    cursor: text;

    /*background-color: transparent;*/

    border-left: transparent 1px solid;

    border-right: transparent 1px solid;

    border-left: none;

}

.nav-mail:visited{

    /*color: white;*/

    cursor: text;

    background-color: transparent;

    border-left: transparent 1px solid;

    border-right: transparent 1px solid;

}

.nav-logo:hover{

    cursor: pointer;

}

.nav-mail-icon{

    font-size: 15px;

    background-color: transparent;

    cursor: pointer;

}

a:active {

    background-color: transparent;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<nav id="navbar" class="navbar navbar-fixed-top">

    

    <div class="container-fluid" >

        <div class="navbar-header">

            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

            </button>

            <a class="nav-logo" href="#1"><img class="img-responsive header-logoIMG center-block" src="Images/header/LOGO.png"></a>

        </div>

        <div class="collapse navbar-collapse" id="myNavbar">

            <ul class="nav navbar-nav navigation" id="myList">

                <li  class="nav-btn active"><a href="#1">Home</a></li>

                <li class ="nav-btn"><a href="#2">About Us</a></li>

                <li class ="nav-btn"><a href="#3">Our projects</a></li>

                <li class ="nav-btn"><a href="#4">Cooperation</a></li>

                <li class ="nav-btn"><a href="#5">Services</a></li>

                <li class ="nav-btn"><a href="#7">Contacts</a></li>

                <li class = "nav-item my-mail"><a href="mailto:MyEmail@gmail.com" class="nav-mail"><i class="glyphicon glyphicon-envelope nav-mail-icon"></i></a></li>

            </ul>

        </div>

    </div>

</nav>

If you have any Ideas what is wrong, please help.
If youll follow the example:https://jsfiddle.net/borovec/aq9Laaew/272810/

you can see that there is a same problem if youll open the menu and press on any item except home, it will remain the white background color.

Thanks in advance!

edited Nov 16 '18 at 9:04

asked Nov 16 '18 at 8:50

boandriy

231315

Please create a plunker or jsfiddle example and paste here so we will get exact clarity.

– Laxminarayan
Nov 16 '18 at 8:58

try .my-mail a:visited {background-color: transparent;}

– Manish Patel
Nov 16 '18 at 8:59

1

Also explain what exactly you mean by “after being visited”. Are you talking about the :focus style here? (.nav>li>a:focus {background-color: #eee} from nav.less Bootstrap stylesheet.)

– misorude
Nov 16 '18 at 9:00

1

created example: jsfiddle.net/borovec/aq9Laaew/272810

– boandriy
Nov 16 '18 at 9:05

add a comment |

I am facing the problem when the Bootstrap item is remaining white background color after being visited. Here is the Html

.my-mail{

    background-color: transparent;

    cursor:pointer ;

}





.nav-mail:hover:not(.active){

    border-left: #007f7e 1px solid;

    border-right: #007f7e 1px solid;

    color: #007f7e;

    /*background-color: transparent;*/

    cursor: pointer;

}

.nav-mail:active{

    color: white;

    cursor: text;

    /*background-color: transparent;*/

    border-left: transparent 1px solid;

    border-right: transparent 1px solid;

    border-left: none;

}

.nav-mail:visited{

    /*color: white;*/

    cursor: text;

    background-color: transparent;

    border-left: transparent 1px solid;

    border-right: transparent 1px solid;

}

.nav-logo:hover{

    cursor: pointer;

}

.nav-mail-icon{

    font-size: 15px;

    background-color: transparent;

    cursor: pointer;

}

a:active {

    background-color: transparent;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<nav id="navbar" class="navbar navbar-fixed-top">

    

    <div class="container-fluid" >

        <div class="navbar-header">

            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

            </button>

            <a class="nav-logo" href="#1"><img class="img-responsive header-logoIMG center-block" src="Images/header/LOGO.png"></a>

        </div>

        <div class="collapse navbar-collapse" id="myNavbar">

            <ul class="nav navbar-nav navigation" id="myList">

                <li  class="nav-btn active"><a href="#1">Home</a></li>

                <li class ="nav-btn"><a href="#2">About Us</a></li>

                <li class ="nav-btn"><a href="#3">Our projects</a></li>

                <li class ="nav-btn"><a href="#4">Cooperation</a></li>

                <li class ="nav-btn"><a href="#5">Services</a></li>

                <li class ="nav-btn"><a href="#7">Contacts</a></li>

                <li class = "nav-item my-mail"><a href="mailto:MyEmail@gmail.com" class="nav-mail"><i class="glyphicon glyphicon-envelope nav-mail-icon"></i></a></li>

            </ul>

        </div>

    </div>

</nav>

If you have any Ideas what is wrong, please help.
If youll follow the example:https://jsfiddle.net/borovec/aq9Laaew/272810/

you can see that there is a same problem if youll open the menu and press on any item except home, it will remain the white background color.

Thanks in advance!

edited Nov 16 '18 at 9:04

asked Nov 16 '18 at 8:50

boandriy

231315

I am facing the problem when the Bootstrap item is remaining white background color after being visited. Here is the Html

.my-mail{

    background-color: transparent;

    cursor:pointer ;

}





.nav-mail:hover:not(.active){

    border-left: #007f7e 1px solid;

    border-right: #007f7e 1px solid;

    color: #007f7e;

    /*background-color: transparent;*/

    cursor: pointer;

}

.nav-mail:active{

    color: white;

    cursor: text;

    /*background-color: transparent;*/

    border-left: transparent 1px solid;

    border-right: transparent 1px solid;

    border-left: none;

}

.nav-mail:visited{

    /*color: white;*/

    cursor: text;

    background-color: transparent;

    border-left: transparent 1px solid;

    border-right: transparent 1px solid;

}

.nav-logo:hover{

    cursor: pointer;

}

.nav-mail-icon{

    font-size: 15px;

    background-color: transparent;

    cursor: pointer;

}

a:active {

    background-color: transparent;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<nav id="navbar" class="navbar navbar-fixed-top">

    

    <div class="container-fluid" >

        <div class="navbar-header">

            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

            </button>

            <a class="nav-logo" href="#1"><img class="img-responsive header-logoIMG center-block" src="Images/header/LOGO.png"></a>

        </div>

        <div class="collapse navbar-collapse" id="myNavbar">

            <ul class="nav navbar-nav navigation" id="myList">

                <li  class="nav-btn active"><a href="#1">Home</a></li>

                <li class ="nav-btn"><a href="#2">About Us</a></li>

                <li class ="nav-btn"><a href="#3">Our projects</a></li>

                <li class ="nav-btn"><a href="#4">Cooperation</a></li>

                <li class ="nav-btn"><a href="#5">Services</a></li>

                <li class ="nav-btn"><a href="#7">Contacts</a></li>

                <li class = "nav-item my-mail"><a href="mailto:MyEmail@gmail.com" class="nav-mail"><i class="glyphicon glyphicon-envelope nav-mail-icon"></i></a></li>

            </ul>

        </div>

    </div>

</nav>

If you have any Ideas what is wrong, please help.
If youll follow the example:https://jsfiddle.net/borovec/aq9Laaew/272810/

you can see that there is a same problem if youll open the menu and press on any item except home, it will remain the white background color.

Thanks in advance!

.my-mail{

    background-color: transparent;

    cursor:pointer ;

}





.nav-mail:hover:not(.active){

    border-left: #007f7e 1px solid;

    border-right: #007f7e 1px solid;

    color: #007f7e;

    /*background-color: transparent;*/

    cursor: pointer;

}

.nav-mail:active{

    color: white;

    cursor: text;

    /*background-color: transparent;*/

    border-left: transparent 1px solid;

    border-right: transparent 1px solid;

    border-left: none;

}

.nav-mail:visited{

    /*color: white;*/

    cursor: text;

    background-color: transparent;

    border-left: transparent 1px solid;

    border-right: transparent 1px solid;

}

.nav-logo:hover{

    cursor: pointer;

}

.nav-mail-icon{

    font-size: 15px;

    background-color: transparent;

    cursor: pointer;

}

a:active {

    background-color: transparent;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<nav id="navbar" class="navbar navbar-fixed-top">

    

    <div class="container-fluid" >

        <div class="navbar-header">

            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

            </button>

            <a class="nav-logo" href="#1"><img class="img-responsive header-logoIMG center-block" src="Images/header/LOGO.png"></a>

        </div>

        <div class="collapse navbar-collapse" id="myNavbar">

            <ul class="nav navbar-nav navigation" id="myList">

                <li  class="nav-btn active"><a href="#1">Home</a></li>

                <li class ="nav-btn"><a href="#2">About Us</a></li>

                <li class ="nav-btn"><a href="#3">Our projects</a></li>

                <li class ="nav-btn"><a href="#4">Cooperation</a></li>

                <li class ="nav-btn"><a href="#5">Services</a></li>

                <li class ="nav-btn"><a href="#7">Contacts</a></li>

                <li class = "nav-item my-mail"><a href="mailto:MyEmail@gmail.com" class="nav-mail"><i class="glyphicon glyphicon-envelope nav-mail-icon"></i></a></li>

            </ul>

        </div>

    </div>

</nav>

.my-mail{

    background-color: transparent;

    cursor:pointer ;

}





.nav-mail:hover:not(.active){

    border-left: #007f7e 1px solid;

    border-right: #007f7e 1px solid;

    color: #007f7e;

    /*background-color: transparent;*/

    cursor: pointer;

}

.nav-mail:active{

    color: white;

    cursor: text;

    /*background-color: transparent;*/

    border-left: transparent 1px solid;

    border-right: transparent 1px solid;

    border-left: none;

}

.nav-mail:visited{

    /*color: white;*/

    cursor: text;

    background-color: transparent;

    border-left: transparent 1px solid;

    border-right: transparent 1px solid;

}

.nav-logo:hover{

    cursor: pointer;

}

.nav-mail-icon{

    font-size: 15px;

    background-color: transparent;

    cursor: pointer;

}

a:active {

    background-color: transparent;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<nav id="navbar" class="navbar navbar-fixed-top">

    

    <div class="container-fluid" >

        <div class="navbar-header">

            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

            </button>

            <a class="nav-logo" href="#1"><img class="img-responsive header-logoIMG center-block" src="Images/header/LOGO.png"></a>

        </div>

        <div class="collapse navbar-collapse" id="myNavbar">

            <ul class="nav navbar-nav navigation" id="myList">

                <li  class="nav-btn active"><a href="#1">Home</a></li>

                <li class ="nav-btn"><a href="#2">About Us</a></li>

                <li class ="nav-btn"><a href="#3">Our projects</a></li>

                <li class ="nav-btn"><a href="#4">Cooperation</a></li>

                <li class ="nav-btn"><a href="#5">Services</a></li>

                <li class ="nav-btn"><a href="#7">Contacts</a></li>

                <li class = "nav-item my-mail"><a href="mailto:MyEmail@gmail.com" class="nav-mail"><i class="glyphicon glyphicon-envelope nav-mail-icon"></i></a></li>

            </ul>

        </div>

    </div>

</nav>

html css twitter-bootstrap-3

edited Nov 16 '18 at 9:04

asked Nov 16 '18 at 8:50

boandriy

231315

edited Nov 16 '18 at 9:04

asked Nov 16 '18 at 8:50

boandriy

231315

edited Nov 16 '18 at 9:04

asked Nov 16 '18 at 8:50

boandriy

231315

asked Nov 16 '18 at 8:50

boandriy

231315

asked Nov 16 '18 at 8:50

boandriy

231315

Please create a plunker or jsfiddle example and paste here so we will get exact clarity.

– Laxminarayan
Nov 16 '18 at 8:58

try .my-mail a:visited {background-color: transparent;}

– Manish Patel
Nov 16 '18 at 8:59

1

Also explain what exactly you mean by “after being visited”. Are you talking about the :focus style here? (.nav>li>a:focus {background-color: #eee} from nav.less Bootstrap stylesheet.)

– misorude
Nov 16 '18 at 9:00

1

created example: jsfiddle.net/borovec/aq9Laaew/272810

– boandriy
Nov 16 '18 at 9:05

add a comment |

Please create a plunker or jsfiddle example and paste here so we will get exact clarity.

– Laxminarayan
Nov 16 '18 at 8:58

try .my-mail a:visited {background-color: transparent;}

– Manish Patel
Nov 16 '18 at 8:59

1

Also explain what exactly you mean by “after being visited”. Are you talking about the :focus style here? (.nav>li>a:focus {background-color: #eee} from nav.less Bootstrap stylesheet.)

– misorude
Nov 16 '18 at 9:00

1

created example: jsfiddle.net/borovec/aq9Laaew/272810

– boandriy
Nov 16 '18 at 9:05

Please create a plunker or jsfiddle example and paste here so we will get exact clarity.

– Laxminarayan
Nov 16 '18 at 8:58

try .my-mail a:visited {background-color: transparent;}

– Manish Patel
Nov 16 '18 at 8:59

Also explain what exactly you mean by “after being visited”. Are you talking about the :focus style here? (.nav>li>a:focus {background-color: #eee} from nav.less Bootstrap stylesheet.)

– misorude
Nov 16 '18 at 9:00

created example: jsfiddle.net/borovec/aq9Laaew/272810

– boandriy
Nov 16 '18 at 9:05

add a comment |

2 Answers
2

active

oldest

votes

Try this

.nav >li>a:focus {

    background-color: transparent;

}

answered Nov 16 '18 at 9:17

Prameshwar Kumar

574

Thanks! that solved the problem!

– boandriy
Nov 16 '18 at 9:30

add a comment |

I think you just need to set css for :focus
like..

li a:focus {

    background-color: rgba(0,0,0,0) !important;

    border:none !important;

}

edited Nov 16 '18 at 9:33

James Coyle

5,47711638

answered Nov 16 '18 at 9:28

J. Alice

212

Thanks! Your answer works but @Prameshwar Kumar post the answer faster. Still voted for your answer so that other people will know that it is also right.

– boandriy
Nov 16 '18 at 9:33

Using !important is not recommended. If required increase the specificity of your selector.

– James Coyle
Nov 16 '18 at 9:34

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53334331%2fbootstrap-li-item-remeins-highlighted-in-white-after-visited%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

Try this

.nav >li>a:focus {

    background-color: transparent;

}

answered Nov 16 '18 at 9:17

Prameshwar Kumar

574

Thanks! that solved the problem!

– boandriy
Nov 16 '18 at 9:30

add a comment |

Try this

.nav >li>a:focus {

    background-color: transparent;

}

answered Nov 16 '18 at 9:17

Prameshwar Kumar

574

Thanks! that solved the problem!

– boandriy
Nov 16 '18 at 9:30

add a comment |

Try this

.nav >li>a:focus {

    background-color: transparent;

}

answered Nov 16 '18 at 9:17

Prameshwar Kumar

574

Try this

.nav >li>a:focus {

    background-color: transparent;

}

answered Nov 16 '18 at 9:17

Prameshwar Kumar

574

answered Nov 16 '18 at 9:17

Prameshwar Kumar

574

answered Nov 16 '18 at 9:17

Prameshwar Kumar

574

answered Nov 16 '18 at 9:17

Prameshwar Kumar

574

Thanks! that solved the problem!

– boandriy
Nov 16 '18 at 9:30

add a comment |

Thanks! that solved the problem!

– boandriy
Nov 16 '18 at 9:30

Thanks! that solved the problem!

– boandriy
Nov 16 '18 at 9:30

add a comment |

I think you just need to set css for :focus
like..

li a:focus {

    background-color: rgba(0,0,0,0) !important;

    border:none !important;

}

edited Nov 16 '18 at 9:33

James Coyle

5,47711638

answered Nov 16 '18 at 9:28

J. Alice

212

Thanks! Your answer works but @Prameshwar Kumar post the answer faster. Still voted for your answer so that other people will know that it is also right.

– boandriy
Nov 16 '18 at 9:33

Using !important is not recommended. If required increase the specificity of your selector.

– James Coyle
Nov 16 '18 at 9:34

add a comment |

I think you just need to set css for :focus
like..

li a:focus {

    background-color: rgba(0,0,0,0) !important;

    border:none !important;

}

edited Nov 16 '18 at 9:33

James Coyle

5,47711638

answered Nov 16 '18 at 9:28

J. Alice

212

Thanks! Your answer works but @Prameshwar Kumar post the answer faster. Still voted for your answer so that other people will know that it is also right.

– boandriy
Nov 16 '18 at 9:33

Using !important is not recommended. If required increase the specificity of your selector.

– James Coyle
Nov 16 '18 at 9:34

add a comment |

I think you just need to set css for :focus
like..

li a:focus {

    background-color: rgba(0,0,0,0) !important;

    border:none !important;

}

edited Nov 16 '18 at 9:33

James Coyle

5,47711638

answered Nov 16 '18 at 9:28

J. Alice

212

I think you just need to set css for :focus
like..

li a:focus {

    background-color: rgba(0,0,0,0) !important;

    border:none !important;

}

edited Nov 16 '18 at 9:33

James Coyle

5,47711638

answered Nov 16 '18 at 9:28

J. Alice

212

edited Nov 16 '18 at 9:33

James Coyle

5,47711638

edited Nov 16 '18 at 9:33

James Coyle

5,47711638

edited Nov 16 '18 at 9:33

James Coyle

5,47711638

answered Nov 16 '18 at 9:28

J. Alice

212

answered Nov 16 '18 at 9:28

J. Alice

212

answered Nov 16 '18 at 9:28

J. Alice

212

Thanks! Your answer works but @Prameshwar Kumar post the answer faster. Still voted for your answer so that other people will know that it is also right.

– boandriy
Nov 16 '18 at 9:33

Using !important is not recommended. If required increase the specificity of your selector.

– James Coyle
Nov 16 '18 at 9:34

add a comment |

Thanks! Your answer works but @Prameshwar Kumar post the answer faster. Still voted for your answer so that other people will know that it is also right.

– boandriy
Nov 16 '18 at 9:33

Using !important is not recommended. If required increase the specificity of your selector.

– James Coyle
Nov 16 '18 at 9:34

Thanks! Your answer works but @Prameshwar Kumar post the answer faster. Still voted for your answer so that other people will know that it is also right.

– boandriy
Nov 16 '18 at 9:33

Using !important is not recommended. If required increase the specificity of your selector.

– James Coyle
Nov 16 '18 at 9:34

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky