CSS :当已经设置了 border-bottom 时，焦点边框过渡将不起作用

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;
    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 3

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

.contactInput::placeholder {
  color: #555
}

当专注时，

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

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

下面的工作片段：

.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;
        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>

CSS :当已经设置了 border-bottom 时，焦点边框过渡将不起作用

CSS :focus border transition won't work when a border-bottom is already set

css

transition

border

css-transitions