Question

所以，我有一些代码，当border-bottom被点击时它（应该）会更改input。这就是我所拥有的：

＆＃13;

$(function() {
    $("#nameInput").click(function() {
        $("#nameInput").animate({
            borderBottom: "3px solid #2C4B9A"
        }, 1000);
    });
});

＆＃13;

#nameInput {
    font-family: 'Open Sans', sans-serif;
    background: #EDEDED;
    border: none;
    border-bottom: 3px solid #939393;
    font-size: 36px;
}
#nameInput:focus {
    outline: none;
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Message Signature</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="index.js"></script>
        <link href="index.css" rel="stylesheet" type="text/css" />
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    </head>
    <body>
        <div id = "informationContainer">
            <input type = "text" id = "nameInput" placeholder = "Name" spellcheck = "false">
        </div>
    </body>
</html>

＆＃13;

基本上，当点击border-bottom，＆＃39; nameInput＆＃39;时，应该将input更改为蓝色。但是，这不起作用。我想知道如何在点击时更改底部border。

P.S我也想知道如何点击颜色更改然后展开（参见下面的.gif）：

Answer 1

这可以通过使用:focus-within纯粹在CSS中完成。您也可以将它实现为一个类（在我的例子中，我选择magicBox。通过使用类而不使用JavaScript，可以更容易地添加多个。

＆＃13;

.magicBox > input {
  font-family: 'Open Sans', sans-serif;
  background: #EDEDED;
  border: none;
  font-size: 36px;
}
.magicBox > input:focus {
  outline: none;
}
.magicBox {
  position:relative;
  display:inline-block;
}

.magicBox::after, .magicBox::before {
  content: ' ';
  width:0%;
  bottom:0px;
  left: 50%;
  transform: translate(-50%, -50%);
  position:absolute;
  transition:ease-in-out .5s all;
}

.magicBox::before {
  width:100%;
  border-bottom: 3px solid #939393;
}

.magicBox::after {
  border-bottom: 3px solid #3366ff;
}

.magicBox:focus-within::after {
  width:100%;
}

＆＃13;

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="magicBox">
  <input type="text" placeholder="Name" spellcheck="false">
</div>

＆＃13;

Answer 2

您是否尝试使用转场？

#nameInput {
    font-family: 'Open Sans', sans-serif;
    background: #EDEDED;
    border: none;
    border-bottom: 3px solid #939393;
    font-size: 36px;
    transition: 1s ease-in-out;
    -webkit-transition: 1s ease-in-out;
}



$(function() {
    $("#nameInput").click(function() {
        $("#nameInput").css(“border-bottom”,"3px solid #2C4B9A"
        );
    });
});

Answer 3

只需更改边框颜色，只需在焦点上设置边框颜色即可。

现在，为了在gif中实现相同的效果，如果我没有错，它不是边框，而是另一个带背景色的html标签。

＆＃13;

$(function() {
    $("#nameInput").click(function() {
        $("#nameInput").animate({
            borderBottom: "3px solid #2C4B9A"
        }, 1000);
    });
});

＆＃13;

#nameInput {
    font-family: 'Open Sans', sans-serif;
    background: #EDEDED;
    border: none;
    border-bottom: 3px solid #939393;
    font-size: 36px;
}
#nameInput:focus {
    outline: none;
    border-bottom-color: red;
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Message Signature</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="index.js"></script>
        <link href="index.css" rel="stylesheet" type="text/css" />
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    </head>
    <body>
        <div id = "informationContainer">
            <input type = "text" id = "nameInput" placeholder = "Name" spellcheck = "false">
        </div>
    </body>
</html>

＆＃13;

如何动画边框底部改变颜色

3 个答案: