按钮的背景颜色没有通过tab键选择而改变

Background color of the button is not changing through tab key selection

本文关键字：tab 选择 改变 背景 颜色 按钮      更新时间：2023-09-26

当我将鼠标悬停在按钮上时，背景颜色正在改变，但通过tab键背景颜色不改变

In html 

<style>
    .btn-primary {
        color: #fff;
        background-color: #227ab9;  
        border: none;
        cursor: pointer;
    }
    .BtnStyle {
        text-transform: uppercase;
        font-weight: 700;
        border-radius: 4px;
    }
    .btn-primary:hover,.btn-primary:focus,.btn-primary:active{
        background-color: #1a5e8e;
    }
</style>    
<table>
    <td><input id="txt" class="" type="text" value=""></td>
    <td id="go" class="BtnStyle btn-primary" >
        <button class="btn-primary"><i class="fa fa-chevron-save" aria-hidden="true"></i>test</button>
    </td>
</table>

<style>
    .btn-primary {
        color: #fff;
        background-color: #227ab9;  
        border: none;
        cursor: pointer;
    }
    .BtnStyle {
        text-transform: uppercase;
        font-weight: 700;
        border-radius: 4px;
    }
    .btn-primary:hover,.btn-primary:focus,.btn-primary:active{
        background-color: #1a5e8e;
    }
</style>    
<table>
    <td><input id="txt" class="" type="text" value=""></td>
    <td id="go" class="BtnStyle btn-primary" >
        <button class="btn-primary"><i class="fa fa-chevron-save" aria-hidden="true"></i>test</button>
    </td>
</table>

你的代码对我来说工作得很好!请看下面的代码:

或者如果你仍然有问题，请在jsFiddle中分享你的完整代码。

看看这个

body {
    padding: 50px;
}
.btn-primary {
  color: #fff;
  background-color: #227ab9;  
}
.BtnStyle {
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 4px;
}
 .btn-primary:hover,.btn-primary:focus,.btn-primary:active{
    background-color: red;// #1a5e8e;
}

<table>
    <td><input id="txt" class="" type="text" value=""></td>
    <td id="go" class="BtnStyle btn-primary" >
                <button class="btn-primary"><i class="fa fa-chevron-save" aria-hidden="true"></i> Button</button>
   </td>
</table>
相关文章：