CSS：当边框底部已经设置时，焦点边框过渡将不起作用

Question

我正在设置文本输入字段的样式，重点是边框和文本在获得焦点时会改变颜色。

问题：当我在初始状态下为“border-bottom”设置样式时，过渡不起作用。
我在开发工具中搞砸了一点，当我删除初始边框底部时，过渡效果很好。但是我还是想保留我最初的边框样式，所以我不确定这里发生了什么。

我进行了几天的搜索和试验，但没有任何效果或帮助。因此，如果有人知道问题所在，将不胜感激！

.contactInput {
    color: #555;
    padding: 7px 0;
    background-color: rgba(0,0,0,0);
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    font-size: 14px;
    border-bottom: 2px solid #555;
    outline: none;
    transition: all 0.2s ease-in;
}

.contactInput:focus {
    color: #000;
    font-weight: 600;
    border-bottom: 2px solid #000;
    transition: all 0.2s ease-in;
}

<form>
  <input placeholder="Name" class="contactInput" type="text" name="" id=""/>
  <input placeholder="Email" class="contactInput" type="text" name="" id=""/>
</form>

Answer 1

更正焦点中的边框底部。

.contactInput:focus {
    border-bottom: 2px solid #000;
}

或者你可以改变边框颜色

.contactInput:focus {
    border-bottom-color: #000;
}

希望这能解决您的问题

Answer 2

实际上它正在工作，但你看不到。因为它在开始和结束时必须有不同的像素。例如 =>

    .contactInput {
        color: #555;
        padding: 7px 0;
        background-color: rgba(0,0,0,0);
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        width:200px;
        font-size: 14px;
        border-bottom:1px solid #000;
        outline: none;
        transition: all 0.2s ease-in;
    }

    .contactInput:focus {
        color: #000;
        font-weight: 600;
        border-bottom: 3px solid #000;
       transition: all 0.2s ease-in;
    }

    <form>
      <input placeholder="Name" class="contactInput" type="text" name="" id=""/>
      <input placeholder="Email" class="contactInput" type="text" name="" id=""/>
    </form>

Answer 3

1) 您可以使用::placeholder 选择器来更改输入的占位符颜色。

.contactInput::placeholder {
  color: #555
}

当专注时，

.contactInput:focus::placeholder {
  color: #000
}

2) 您的边框颜色动画有效。因为您选择的颜色彼此接近，所以您可能不会注意到颜色的变化。

下面的工作sn-p：

.contactInput {
    color: #000; /* text color */
    padding: 7px 0;
    background-color: rgba(0,0,0,0); /* you can use #FFF shortly */
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    font-size: 14px;
    border: 2px solid transparent; /* added this for transparent borders */
    border-bottom-color: #555; /* changed this */
    outline: none;
    transition: all 0.2s ease-in;
}

.contactInput:focus {
    /* remove this color: #000; it is not necessary */
    font-weight: 600;
    border-bottom-color: #000; /* changed this */
    /* remove this transition: all 0.2s ease-in; */
}

/* normal placeholder color */
.contactInput::placeholder {color:#555;opacity:1}
.contactInput:-ms-input-placeholder{color:#555}
.contactInput::-ms-input-placeholder{color:#555}

/* placeholder color when focused */
.contactInput:focus::placeholder {color:#000;opacity:1}
.contactInput:focus:-ms-input-placeholder{color:#000}
.contactInput:focus::-ms-input-placeholder{color:#000}

<form>
  <input placeholder="Name" class="contactInput" type="text" name="" id=""/>
  <input placeholder="Email" class="contactInput" type="text" name="" id=""/>
</form>

Answer 4

怎么了？我认为你的代码工作正常。这样你可以看得更清楚。

.contactInput {
    color: #555;
    padding: 7px 0;
    background-color: rgba(0,0,0,0);
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    font-size: 14px;
    border-bottom: 2px solid #555;
    outline: none;
    transition: all 0.2s ease-in;
}

.contactInput:focus {
    color: #000;
    font-weight: 600;
    border-bottom: 2px solid #000;
    transition: all 0.2s ease-in;
}

<form>
  <input placeholder="Name" class="contactInput" type="text" name="" id=""/>
  <input placeholder="Email" class="contactInput" type="text" name="" id=""/>
</form>