как вставить

Question

.backdrop {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.backdrop.is-hidden {
  opacity: 0.5;
  pointer-events: none;
}
.modal {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  height: 609px;
  background-color: #ffffff;
  background: #ffffff;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 1px rgba(0, 0, 0, 0.14),
    0px 2px 1px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.modal-text {
  color: #212121;
  text-align: center;
  letter-spacing: 0.03em;
  padding-top: 40px;
}

.connection-field {
  margin-bottom: 30px;
  width: 370px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid rgba(33, 33, 33, 0.2);
}
.modal-icon-1 {
  width: 12px;
  height: 12px;
}

<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1"
        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <symbol id="modal-icon-1" viewBox="0 0 32 32">
                <path
                    d="M16 16c4.42 0 8-3.58 8-8s-3.58-8-8-8c-4.42 0-8 3.58-8 8s3.58 8 8 8zM16 20c-5.34 0-16 2.68-16 8v2c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-2c0-5.32-10.66-8-16-8z">
                </path>
            </symbol>
<div class="backdrop">
                    <div class="modal">
                        <h3 class="modal-text">Оставьте свои данные,мы вам перезвоним</h3>
                        <form>
                            <input class="connection-field" type="text" placeholder="Имя" name="name"
                                required-placeholder="">
                            <svg class="modal-icon-1">
                                <use xlink:href="#modal-icon-1" </use>
                            </svg>
                            </input>
                            
                        </form>
                    </div>

Как в input вставить svg-иконку???Когда задаю иконке position:absolute; а input position:relative; то иконка позиционируется относительно модального окна а не поля регистрации...

Answer 1

Вот так будет лучше:

.backdrop {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.backdrop.is-hidden {
  opacity: 0.5;
  pointer-events: none;
}

.modal {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  /*height: 609px;*/
  padding: 20px;
  background-color: #ffffff;
  background: #ffffff;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 2px 1px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.modal-text {
  color: #212121;
  text-align: center;
  letter-spacing: 0.03em;
}

.input {
  position: relative;
  width: 370px;
  margin: 0 auto;
}

.connection-field {
  display: block;
  margin-bottom: 30px;
  width: 330px;
  height: 40px;
  margin: 0 auto;
  padding-left: 40px;
  border-radius: 4px;
  border: 1px solid rgba(33, 33, 33, 0.2);
}

.modal-icon-1 {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 12px;
  height: 12px;
}

<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="modal-icon-1" viewBox="0 0 32 32">
<path d="M16 16c4.42 0 8-3.58 8-8s-3.58-8-8-8c-4.42 0-8 3.58-8 8s3.58 8 8 8zM16 20c-5.34 0-16 2.68-16 8v2c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-2c0-5.32-10.66-8-16-8z"></path
></symbol>
<div class="backdrop">
<div class="modal">
<h3 class="modal-text">Оставьте свои данные, мы вам перезвоним</h3>
<div class="input">
<form>
<input class="connection-field" type="text" placeholder="Имя" name="name" required-placeholder="">
</form>
<svg class="modal-icon-1"><use xlink:href="#modal-icon-1"</use></svg>
</div>
</div>

БЛОГ НА HUSL

как вставить

Ответы (1 шт):

БЛОГ НА HUSL

как вставить в

Ответы (1 шт):

как вставить