输入字段的渐变颜色

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 {&nbsp; width: 100%;&nbsp; position: relative;&nbsp; margin-bottom: 37px;&nbsp; border-bottom: 2px solid transparent;&nbsp; border-image: linear-gradient(to right, #b721ff 0%, red 100%);&nbsp; border-image-slice: 1;}