Неправильное расположение значка Font Awesome в поле ввода в Google Chrome - PullRequest
Новая
       8

Неправильное расположение значка Font Awesome в поле ввода в Google Chrome

0 голосов
/ 09 февраля 2019

Я создал специальное окно поиска со значком со шрифтом с потрясающей информацией справа в окне поиска.Наведите указатель мыши на этот значок, чтобы получить больше информации о требуемом формате ввода.Это хорошо работает для 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>

Ответы [ 2 ]

0 голосов
/ 09 февраля 2019 

.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>
0 голосов
/ 09 февраля 2019

Просто замените .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>
...