Question

我创建了一个自定义搜索框，在搜索框内的右侧带有一个很棒的字体信息图标。将鼠标悬停在此图标上，可以为用户提供有关所需输入格式的更多信息。它确实适用于Firefox和Safari（未经测试的IE），但是在Google Chrome浏览器中，信息图标位于输入框下方。但是，垂直位置是正确的。

.SearchBox input {
  flex: 1!important;
  height: 35px!important;
  margin: 0px 0 0 0!important;
  z-index: 100!important;
  background: #fcfcfc!important;
  border-top: 1px solid #c4c4c4!important;
  border-bottom: 1px solid #cecece!important;
  border-left: 1px solid #cecece!important;
  border-right: 1px solid #cecece!important;
  margin-left: 0px!important;
  font: inherit!important;
  outline: none!important;
  /* remove focus ring from Webkit */
  line-height: 1.2!important;
  padding: 5px!important;
  padding-left: 12px!important;
  padding-right: 36px!important;
  width: 100%!important;
  /* <-- Set size to 100% */
  font-size: 15px!important;
  transition: 0.15s ease-in!important;
}

.right-inner-addon {
  position: relative!important;
}

.right-inner-addon input {
  padding-right: 30px!important;
}

.right-inner-addon i {
  position: absolute!important;
  right: 1px!important;
  padding: 10px 8px!important;
  cursor: pointer!important;
}

.fa-searchinfo {
  color: #808287!important;
  font-size: 11.5pt!important;
}

.fa-searchinfo:hover {
  color: #565859!important;
  font-size: 11.5pt!important;
}

<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

</head>

<div class="SearchBox">
  <div class="right-inner-addon">
    <input name="searchquery" type="text" id="sfq" size="35" maxlength="15000" class="tftextinput2" placeholder="enter ID" value="" />
    <a title="Some detailed information about possible input formats." class="fa-searchinfo"><i class="fa fa-info-circle" ></i></a>
  </div>
</div>

Answer 1

只需将css下面的.right-inner-addon i替换为：

.right-inner-addon a {
    position: absolute!important;
    right: 1px!important;
    top:6px!important;
    padding: 10px 8px!important;
    cursor: pointer!important;
}

.SearchBox input {
  flex: 1!important;
  height: 35px!important;
  margin: 0px 0 0 0!important;
  z-index: 100!important;
  background: #fcfcfc!important;
  border-top: 1px solid #c4c4c4!important;
  border-bottom: 1px solid #cecece!important;
  border-left: 1px solid #cecece!important;
  border-right: 1px solid #cecece!important;
  margin-left: 0px!important;
  font: inherit!important;
  outline: none!important;
  line-height: 1.2!important;
  padding: 5px!important;
  padding-left: 12px!important;
  padding-right: 36px!important;
  width: 100%!important;
  font-size: 15px!important;
  transition: 0.15s ease-in!important;
  -webkit-transition: 0.15s ease-in!important;
  -moz-transition: 0.15s ease-in!important;
  -ms-transition: 0.15s ease-in!important;
}
.right-inner-addon {
  position: relative!important;
}
.right-inner-addon input {
  padding-right: 30px!important;
}
.right-inner-addon a {
  position: absolute!important;
  right: 1px!important;
  top:6px!important;
  padding: 10px 8px!important;
  cursor: pointer!important;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="SearchBox"> 
  <div class="right-inner-addon">
    <input name="searchquery" type="text" id="sfq" size="35" maxlength="15000" class="tftextinput2" placeholder= "enter ID" value= "" />
    <a title="Some detailed information about possible input formats." class = "fa-searchinfo" ><i class="fa fa-info-circle" ></i></a>
  </div>
</div>

Answer 2

.SearchBox input {
    flex: 1!important;
    height: 35px!important;
    margin: 0px 0 0 0!important;
    z-index: 100!important;
    background: #fcfcfc!important;
    border-top: 1px solid #c4c4c4!important;
    border-bottom: 1px solid #cecece!important;
    border-left: 1px solid #cecece!important;
    border-right: 1px solid #cecece!important;
    margin-left: 0px!important;
    font: inherit!important;
    outline:none!important; /* remove focus ring from Webkit */
    line-height: 1.2!important;
    padding: 5px!important;
    padding-left: 12px!important;
    padding-right: 36px!important;
    width: 100%!important;  /* <-- Set size to 100% */
    font-size: 15px!important;
    transition: 0.15s ease-in!important;

    }

.right-inner-addon {
    position: relative!important;
}

.right-inner-addon input {
    padding-right: 30px!important;    
}


.span {
        float: right;
        margin-right: 6px;
       margin-top:-30px;
        position: relative;
        z-index: 2;
        color: red;
    }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="SearchBox"> 
<div class="right-inner-addon">
<input name="searchquery" type="text" id="sfq" size="35" maxlength="15000" class="tftextinput2" placeholder= "enter ID">
<a title="Some detailed information about possible input formats." class = "fa-searchinfo" ><i class="fa fa-info-circle span"></i></a>

</div>
</div>

Google Chrome浏览器输入框中字体真棒图标的位置错误

2 个答案: