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

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

В Firefox 65.0 у меня тоже не работает.

— 09.02.2019 01:04

Это правда. При запуске кода, снятого в Firefox 65.0, я только что понял, что он также неправильно позиционирует значок. На моем виртуальном хосте это работает, единственная разница в том, что я загружаю более старую версию fontawesome с локального сервера.

— 09.02.2019 01:20

html css google-chrome firefox font-awesome

09.02.2019 00:28

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

180

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Просто замените .right-inner-addon i ниже css:

.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>

09.02.2019 00:44

.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>

09.02.2019 06:18

Другие вопросы по теме

Текстовый диапазон отображается только после наведения мыши

Как создать сетку на основе flexbox?

Как объединить (и свернуть/развернуть) похожие события в FullCalendar

Автопоток CSS Grid: плотный; с данными, которые динамически загружаются с помощью Django

Фоновое изображение не появляется, несмотря на то, что отображается как установленное в консоли браузера

Почему стиль моей HTML-кнопки на моем iPhone выглядит иначе?

Как убрать полосу вверху страницы в html?

Я хочу изменить метку: после цвета после проверки флажка ввода

Как написать фоновый тег CSS внутри DIV внутри инструкции PHP-echo

Почему .css border-radius не работает с Xamarin XAML

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

Ответы 2

Другие вопросы по теме

Похожие вопросы