输入字段的渐变颜色

Question

我认为这只是一个相对简单的问题，但找不到要改变的地方。如果您单击此输入字段，您会在该字段的底部看到渐变颜色。我需要添加一些东西，以便在加载页面时（因此不要单击）在底部获得红色渐变颜色，单击时渐变会更改为黄色到粉红色的渐变。提前致谢！<div class="limiter"> <div class="wrap-input100 validate-input"> <span class="btn-show-pass"> <i class="zmdi zmdi-eye"></i> </span> <input class="input100" type="password" name="password"> <span class="focus-input100" data-placeholder="wachtwoord"></span> </div></div>

Answer 1

将 CSSborder-image和border-image-slice属性添加到.wrap-input100类中

.wrap-input100 {

  width: 100%;

  position: relative;

  margin-bottom: 37px;

  border-bottom: 2px solid transparent;

  border-image: linear-gradient(to right, #b721ff 0%, red 100%);

  border-image-slice: 1;

}