输入文本的CSS转换问题

时间：2018-09-24 17:24:42

标签： css twitter-bootstrap css-transitions 

input[type="text"] {
  position: relative;
  top: 0;
  left: 0;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  transition: all .7s;
}

input[type="text"]:focus {
  padding: 1px 1px 1px 2px;
}

.searchInput {
  background-color: transparent;
  border-bottom: 1px solid;
  border-bottom-color: #808080;
}
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>

  <!----------------------------- nav bar ------------------------------>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="?p=#"><img src="https://png.pngtree.com/element_pic/17/01/01/93b5a86a0836ef7f1a078d48ab3bc32f.jpg" alt="BizarroNEWS" width="50%"></a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">

      <ul class="navbar-nav nav mr-auto mt-2 mt-lg-0 ml-3 textoNavbar dropMenuHoverColor">
        <li class="nav-item pr-5">
          <a class="nav-link" href="?p=#">pincipal</a>
        </li>
        <li class="nav-item pr-5">
          <a class="nav-link" href="?p=#">pincipal</a>
        </li>
        <li class="nav-item pr-5">
          <a class="nav-link" href="?p=#">pincipal</a>
        </li>
        <li class="nav-item pr-5">
          <a class="nav-link" href="?p=#">pincipal</a>
        </li>
        <li class="nav-item pr-5">
          <a class="nav-link" href="?p=#">pincipal</a>
        </li>

      </ul>
      <div class="col-sm-12 col-md-12 col-lg-3 my-1">
        <form action="?p=pesquisa" method="post" value="" enctype="multipart/form-data">
          <div class="input-group">
            <input class="form-control searchInput" id="cxnome" name="cxnome" type="text" placeholder="Pesquisar" aria-label="Search" required="required">
            <button type="submit" name="pesquisar" class="input-group-append button">
                         <img src="img/searchIcon.png">
                      </button>
          </div>
        </form>
      </div>

    </div>
  </nav>
  <!----------------------------- end nav bar ------------------------------>


  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

</html>

介于992像素和1180像素之间的屏幕尺寸。当我单击principal时，徽标和名为transition的链接会受到input的影响。 这不应该发生，我不知道问题出在哪里，也许问题出在transition: all行上？我不确定，因为我对css的使用不多。

为什么会发生，我该如何解决？

1 个答案:

答案 0 :(得分：1)

之所以会发生这种情况，是因为您将输入的填充定位为目标，而不是实际的占位符，据我了解，这实际上是您要设置的动画。

所以-您将插入::-webkit-input-placeholder伪选择器，并对其应用过渡效果。

这看起来像这样：

.navbar {width: 100%; height: 100%;}

input[type="text"] {
	position: relative; top: 0; left: 0;
}

/*Hit the placeholder of input. not actual input. */
input[type="text"]::-webkit-input-placeholder {
	padding-left: 6px;
        -webkit-transition: all .7s;
	-moz-transition: all .7s;
	transition: all .7s;
} 

/* set padding down since you can't do negative padding */
input[type="text"]:focus::-webkit-input-placeholder {
	padding-left: 0;
}  

.searchInput{
	background-color: transparent; 
	border-bottom: 1px solid;
	border-bottom-color: #808080;
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <link rel="stylesheet" type="text/css" href="MeuCss/cssSearchBar.css">

    <title>Hello, world!</title>
  </head>
  <body>

    <!----------------------------- nav bar ------------------------------>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">           
        <a class="navbar-brand" href="?p=#"><img src="https://png.pngtree.com/element_pic/17/01/01/93b5a86a0836ef7f1a078d48ab3bc32f.jpg" alt="BizarroNEWS" width="50%"></a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">

          <ul class="navbar-nav nav mr-auto mt-2 mt-lg-0 ml-3 textoNavbar dropMenuHoverColor">
            <li class="nav-item pr-5">
                <a class="nav-link" href="?p=#">pincipal</a>
            </li>
            <li class="nav-item pr-5">
                <a class="nav-link" href="?p=#">pincipal</a>
            </li>
            <li class="nav-item pr-5">
                <a class="nav-link" href="?p=#">pincipal</a>
            </li>
            <li class="nav-item pr-5">
                <a class="nav-link" href="?p=#">pincipal</a>
            </li>
            <li class="nav-item pr-5">
                <a class="nav-link" href="?p=#">pincipal</a>
            </li>
                   
        </ul>
          <div class="col-sm-12 col-md-12 col-lg-3 my-1">
              <form action="?p=pesquisa" method="post" value="" enctype="multipart/form-data">
                  <div class="input-group">               
                      <input class="form-control searchInput" id="cxnome" name="cxnome" type="text" placeholder="Pesquisar" aria-label="Search" required="required">
                      <button type="submit" name="pesquisar" class="input-group-append button">
                         <img src="img/searchIcon.png">
                      </button>            
                  </div>
              </form>
          </div>

        </div>
    </nav>
    <!----------------------------- end nav bar ------------------------------>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

相关问题
最新问题