Как сделать значок над полем ввода отзывчивым

У меня возникла проблема с тем, чтобы мой значок оставался фиксированным в правом верхнем углу поля ввода, чтобы он реагировал. Я хочу иметь возможность настроить его на различные размеры экрана. В настоящее время у меня есть следующие коды:

HTML:

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" type="text/css" href=" https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <form class="form-class">

    <div class="form-group">
        <label>
        <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
        <span>Username</span>
      </label>
      <input type="text" class="form-control" name="name" placeholder="Username">
    </div>
    </form>
</head>
<body>

</body>
</html>

CSS:

    .form-class input {
        width: 70vw;
        @media all and (min-width: 768px) {
          width: 30vw;
        }
        @media all and (min-width: 1200px) {
          width: 25vw;
        }
    }

    .form-class label {
        position: relative;
        font-size: 2rem;
        @media all and (min-width: 768px) {
          font-size: 3rem;
        }

    }

   .form-class label .fa-exclamation-circle  {
              position: absolute;
              font-size: 0.7em;
              color: red;
              top: 28px;
              left: 427px;
              @media all and (min-width: 375px) {
                left: 255px;
              }
              @media all and (min-width: 768px) {
                top: 35px;
                left: 295px;
              }
              @media all and (min-width: 1440px) {
                top: 35px;
                left: 350px;
              }
}

Вышеупомянутый метод не работает очень хорошо, потому что я ориентируюсь только на очень определенные размеры экрана. Является ли использование абсолютного позиционирования правильным подходом или есть лучший способ сделать это? Как мне сделать так, чтобы значок восклицательного знака реагировал на все размеры экрана?

Живую демонстрацию можно найти здесь: https://jsbin.com/kixiliduju/1/edit?html,css,output


html css responsive
person freetoplay    schedule 31.05.2017    source источник
comment
Вы хотите это внутри или снаружи?   -  person João Paulo Macedo    schedule 31.05.2017
comment
@banzomaikaka Я хочу, чтобы половина была внутри, а половина снаружи, как в демо.   -  person freetoplay    schedule 31.05.2017
comment
Это работает? jsbin.com/tujihisare/edit?html,css,js,output   -  person João Paulo Macedo    schedule 31.05.2017
comment
Да, это работает отлично.   -  person freetoplay    schedule 31.05.2017

Ответы (3)


arrow_upward
0
arrow_downward

Вы имеете в виду добавить что-то похожее на кнопку очистки в окне поиска? Итак, вы можете попробовать это Как очистить окно поиска с помощью «x» в bootstrap 3?

person Freelancer    schedule 31.05.2017

arrow_upward
0
arrow_downward

Почему бы не использовать существующие .has-feedback стили в Bootstrap?

.form-group {
  /* define width of input field / label;
     override for other resolutions as necessary */
  width: 70vw;
}

/* define form-group label font size */
.form-group > label {
  font-size: 2rem;
}

/* override default .form-control-feedback colour;
   NB: radial-gradient ensures middle of icon will always show as white,
       otherwise it's possible to see part of the input field through
       the icon */
.has-feedback label ~ .form-control-feedback::before {
  color: red;
  background: radial-gradient(ellipse 40% 40% at 50% 50%, #fff 0%, #fff 99%, transparent 100%)
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href=" https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <form class="form-class">

    <div class="form-group has-error has-feedback">
      <label class="control-label" for="name">Username</label>
      <input type="text" class="form-control" name="name" placeholder="Username" id="name" aria-describedby="name_status">
      <span class="fa fa-exclamation-circle form-control-feedback" aria-hidden="true"></span>
      <span id="name_status" class="sr-only">(error)</span>
    </div>

  </form>
</head>

<body>

</body>

</html>

person Conan    schedule 31.05.2017

arrow_upward
0
arrow_downward

Просто добавьте ниже css и добавьте класс в <i class="fa fa-exclamation-circle rightSide" aria-hidden="true"></i> в html-части ("имя ​​класса - rightSide"), которую я добавил в вашу разметку.

.form-group {
  position:relative;
}
.rightSide {
  position:absolute;
  right:10px;
  top:20px;
  color:red;
}

Удалить form-class из HTML-части.

  <form>
    <div class="form-group">
        <label>
        <i class="fa fa-exclamation-circle rightSide" aria-hidden="true"></i>
        <span>Username</span>
      </label>
      <input type="text" class="form-control" name="name" placeholder="Username">
    </div>
  </form>

Вот рабочая скрипка

обновление скрипта

person LKG    schedule 31.05.2017