CODEWITHSUNDEEP
javascripthtmlcssreactjsreact-bootstrap
liam xu
liam xu

Reputation: 3030

A weird css issue regarding the button hover, click and border?

Below is the jsddle. https://jsfiddle.net/xuhang1128/cmkbu07s/2/ The main related code is below. I used React and React-boostrap to implement it.

.design2-statusMonitor {
    margin-top: 20px;
    .list-group-item {
        display: inline-block;
        background-color: transparent;
       // border: none;
        border-right: 1px solid #CAD5E0;
        border-top: 1px solid #CAD5E0;
        border-bottom: 1px solid #CAD5E0;
        width: auto;
        &.selected {
            background-color: #2f749a;
        }
    }

    .list-group-item:after {
        content: "";
        width: 9px;
        height: 9px;
        position: absolute;
        right: -6px;
        top: 43%;
        z-index: 2;
        background-color: white;
        border-top: 2px solid #CAD5E0;
        border-right: 2px solid #CAD5E0;
        transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }

    .list-group-item.selected:after {
        content: "";
        width: 9px;
        height: 9px;
        position: absolute;
        right: -6px;
        top: 43%;
        z-index: 2;
        background-color: #2f749a;
        border-top: 2px solid #CAD5E0;
        border-right: 2px solid #CAD5E0;
        transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }


    .list-group-item:hover {
        background-color: #c0d5e0;
        color: white;
    }
    .list-group-item:hover:after {
        background-color: #c0d5e0;
    }
}

You can see that when I click any of the bubble button, the triangle looks not normal like below. enter image description here When I left the mouse outside of the button and click any other place, the bubble button became normal?

Could anybody help me to fix it? thanks very much. I have dug into it and googled it a lot, no result.

Upvotes: 0

Views: 383

Answers (2)

Yashwanth M
Yashwanth M

Reputation: 456

When we click on a button, it gets focused and an outline appears.

Just make that outline disappear or remove by adding

outline:none;

https://jsfiddle.net/cmkbu07s/4/

Upvotes: 1

madalinivascu
madalinivascu

Reputation: 32354

Remove outline from the button focus

button:focus {
  outline:none;
}

https://jsfiddle.net/cmkbu07s/3/

Upvotes: 1

Related Questions