Question

我已经进行了浮动文本输入，当用户用户专注于输入我的文本浮动时，但当用户点击我的输入时，我的输入中也需要一个“关闭x”图标。

To include "x cloase" icon I want to use "font-awesome" 
<i class="fa fa-times-circle" aria-hidden="true"></i>

当用户在输入关闭图标外部单击时，不应显示。

请帮助我如何在输入焦点上显示我的关闭图标，下面是我的代码供参考。

.floatInput>input:focus~.floating-label,
.floatInput>input:not(:focus):valid~.floating-label {
  top: 0px;
  left: 18px;
  font-size: 11px;
  opacity: 1;
}

.floatInput>.inputText {
  font-size: 16px;
  width: 100%;
  height: 50px;
  padding-left: 16px;
  padding-top: 10px;
  border: 1px solid #ddd;
  text-shadow: none;
  box-shadow: none;
}

.floatInput>.floating-label {
  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 15px;
  transition: 0.2s ease all;
}

.btn.header-navbar-button.buttonRight {
  background: #3170b7;
  border: 1px solid #3170b7;
  color: #fff;
  padding-top: 14px;
  padding-bottom: 14px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group ml15 mt20 column90 floatInput">
  <input type="text" class="inputText" required/>
  <span class="floating-label">Your email address</span>
  <span class="input-group-btn">
<button class="btn header-navbar-button buttonRight" type="button">
check IMEI
</button>
</span>
</div>

Answer 1

我不能说你的问题对我来说是100％明确的，但这是我在你的代码中所做的：我添加了一个带有新类.floating-close的新div，以使用FontAwesome中的图标并创建关闭按钮。
然后我用CSS来设置它的风格......

以下是我最终得到的片段：

.floatInput>input:focus~.floating-label,
.floatInput>input:not(:focus):valid~.floating-label {
  top: 0px;
  left: 18px;
  font-size: 11px;
  opacity: 1;
}

.floating-close {
  display: none;
}

.floatInput>input:focus~.floating-close {
  display: block;
}

.floatInput>.inputText {
  font-size: 16px;
  width: 100%;
  height: 50px;
  padding-left: 16px;
  padding-top: 10px;
  border: 1px solid #ddd;
  text-shadow: none;
  box-shadow: none;
}

.floatInput>.floating-label {
  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 15px;
  transition: 0.2s ease all;
}

.floatInput>.floating-close {
  position: absolute;
  cursor: pointer;
  right: 10px;
  top: 15px;
  transition: 0.2s ease all;
}

.btn.header-navbar-button.buttonRight {
  background: #3170b7;
  border: 1px solid #3170b7;
  color: #fff;
  padding-top: 14px;
  padding-bottom: 14px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<div class="input-group ml15 mt20 column90 floatInput">
  <input type="text" class="inputText" required/>
  <span class="floating-label">Your email address</span>
  <span class="floating-close"><i class="fa fa-times-circle" aria-hidden="true"></i></span>
  <span class="input-group-btn">
<button class="btn header-navbar-button buttonRight" type="button">
check IMEI
</button>
</span>
</div>

我希望它有所帮助。

Answer 2

像@Takit Isy说的那样，它都是关于display none和block

＆＃13;

.floatInput>input:focus~.floating-label,
.floatInput>input:not(:focus):valid~.floating-label {
  top: 0px;
  left: 18px;
  font-size: 11px;
  opacity: 1;
}

.floatInput>input:focus~.floating-label i {
  display: inline-block;
}
.floatInput .inputText {
  display: inline-block;
  font-size: 16px;
  width: 70%;
  height: 50px;
  padding-left: 16px;
  padding-top: 10px;
  border: 1px solid #ddd;
  text-shadow: none;
  box-shadow: none;
}

.floatInput .floating-label {
  position: absolute;
  pointer-events: none;
  left: 2%;
  top: 5%;
  transition: 0.2s ease all;
}

.floatInput .floating-label div {
  display: inline-block;
}

.floatInput .floating-label i {
  display: none;
}

.floatInput button {
  background: #3170b7;
  border: 1px solid #3170b7;
  color: #fff;
  padding-top: 14px;
  padding-bottom: 14px;
  display: inline-block;
}

＆＃13;

<!doctype html>

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
  </head>
  <body>
    <div class="floatInput">
      <input type="text" class="inputText" required/>
      <span class="floating-label">
        <div>Your email address</div>
        <i class="fa fa-times-circle" aria-hidden="true"></i> 
      </span>
      <button class="" type="button">check IMEI</button>
    </div>
  </body>
</html>

＆＃13;

onfocus关闭图标应显示在右侧

2 个答案: