1

Всем доброго времен суток. Нужно чтобы textarea были линии вниз параллельно тем что слева, ну и чтобы в них когда пишешь текст по линии шел начиная с того где placeholder написан(он потом будет вверх поднматся), не пойму что делаю не так?

Вот как нужно

введите сюда описание изображения

  .form-project__content {
  display: flex;
  justify-content: center;
  margin: 0px 0px 35px 0px;
  background: #161616;
  height: 150px;
}

.form-project__left {
  flex: 0 1 366px;
  margin: 0px 15px 0px 0px;
  height: 110px;
}

.form-project__inputs {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 100%;
  overflow: hidden;
  padding-top: 9px;
}

.form-project__inputs-textarea {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 100%;
  overflow: hidden;
}

.form-project__input {
  position: relative;
  display: block;
  padding: 0.8em;
  width: 100%;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #ccba96;
  font-weight: 400;
  padding: 0em 0em 0.5em 0em;
  width: 100%;
  background: transparent;
  color: #ccba96;
  font-size: 16px;
  resize: none;
}

.form-project__input-textarea {
  background-attachment: local;
  width: 100%;
  color: #ccba96;
  font-size: 16px;
  background-image: repeating-linear-gradient(#161616, #161616 33px, #ccba96 33px, #ccba96 33px, white 34px);
  line-height: 35px;
  border: none;
  resize: none;
  padding: 40px 0px 0px 0px;
}

.form-project__label {
  position: absolute;
  top: -20px;
  font-size: 16px;
  left: 0;
  display: block;
  width: 100%;
  text-align: left;
  color: #ccba96;
  padding: 0px 0px 0px 0px;
  pointer-events: none;
  transform-origin: 0 0;
  transition: transform 0.2s 0.15s, color 1s;
  transition-timing-function: ease-out;
  font-weight: 400;
}

.form-project__label span {
  position: relative;
  display: block;
  padding: 25px 0px 15px 0px;
  width: 100%;
}

.form-project__graphic {
  position: absolute;
  top: 0;
  left: 0;
  width: 300%;
  height: 100%;
  fill: none;
  stroke: #ccba96;
  pointer-events: none;
  transition: transform 0.7s, stroke 0.7s;
  transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
}

.form-project__right {
  flex: 0 1 366px;
  margin: 0px 0px 0px 15px;
  height: 110px;
  .form-project__input._form-focus+.form-project__label {
    top: -2px;
  }
  .form-project__input._form-focus+.form-project__label,
  ._form-focus .form-project__label {
    color: #ccba96;
    transform: translate3d(0, -1.25em, 0) scale3d(0.75, 0.75, 1);
  }
  .form-project__input._form-focus~.form-project__graphic,
  ._form-focus .form-project__graphic {
    stroke: #ccba96;
    transform: translate3d(-66.6%, 0, 0);
  }
<div class="form-project__content">
  <div class="form-project__left">
    <div class="form-project__inputs">
      <input id="input-4" data-required data-validate tabindex="1" type="text" name="form[]" data-value="" autocomplete="off" class="form-project__input" placeholder="">
      <label class="form-project__label" for="input-4">
                                                        <span>имя*</span>
                                                    </label>
      <svg class="form-project__graphic" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
                                                        <path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0" />
                                                        </svg>
    </div>
    <div class="form-project__inputs">
      <input id="input-5" data-required data-validate tabindex="2" type="tel" name="form[]" data-value="" autocomplete="off" class="form-project__input" placeholder="">
      <label class="form-project__label" for="input-5">
                                                            <span>телефон*</span>
                                                        </label>
      <svg class="form-project__graphic" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
                                                            <path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0">
                                                            </svg>
    </div>
    <div class="form-project__inputs">
      <input id="input-6" data-validate tabindex="3" data-required="email" type="email" name="form[]" data-value="" autocomplete="off" class="form-project__input" placeholder="">
      <label class="form-project__label" for="input-6">
                                                                <span>e-mail*</span>
                                                            </label>
      <svg class="form-project__graphic" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
                                                                <path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0">
                                                                </svg>
    </div>
  </div>
  <div class="form-project__right">
    <div class="form-project__inputs-textarea">
      <textarea autocomplete="off" name="form[]" data-value="" data-error="Ошибка" class="form-project__input-textarea"></textarea>
      <label class="form-project__label" for="input-7">
                                                                    <span>поделитесь своей идеей</span>
                                                                </label>
      <svg class="form-project__graphic" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
                                                                    <path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0">
                                                                    </svg>
    </div>
  </div>
</div>

fiddle

2 ответа 2

2

Один из возможных вариантов обернуть textarea в div которому задать разлинееный фон, для того чтобы он был виден необходимо чтобы сам элемент имел прозрачность, а чтобы текст находился прямо на линиях, необходимо соблюсти шаг в заливке равный line-height текстового поля.

Этот вариант скорее про общий подход к разлинеиванию, во втором снипете представлен вариант который уже можно приспособить к решаемой задаче.

textarea {
  background: transparent;
  line-height: 20px;
}

.wrapper{
    width: fit-content;
    height: fit-content;
    background: repeating-linear-gradient( to bottom, #aeabab, transparent 1px, transparent 1px, transparent 20px );
}
 <div class="wrapper">
    <textarea name="textarea" rows="10" cols="50">Write something here</textarea>
 <div>

Чуть более приспособленный вариант, хочу обратить внимание что для того чтобы линия не шла над текстом используется небольшой хак так как background-position в данном случае не имеет эффекта, используется border-top для сдвига полоски вниз:

textarea {
  padding: 20px 20px;
  background: transparent;
  line-height: 30px;
  color: white;
}

.wrapper {
  position: relative;
  width: fit-content;
  height: fit-content;
  background: transparent;
}
.back {
   position: absolute;
   left: 0px;
   top: 0px;
   right: 0px;
   bottom: 0px;
   background:  #161616;
   z-index: -1;
 }

.layer {
   position: absolute;
   left: 20px;
   top: 20px;
   right: 20px;
   bottom: 20px;
   background: repeating-linear-gradient( to bottom, #aeabab, #161616 2px, #161616 30px, #161616 2px ); 
   border-top: 30px #161616 solid;
   z-index: -1;
 }
<div class="wrapper">
    <div class="back"></div>
    <div class="layer"></div>
    <textarea name="textarea" rows="10" cols="50">Write something here</textarea>
 <div>

4
  • 1
    Я бы сделал отступ background-position на одну строку, чтобы над текстом не было линии) (+)
    – De.Minov
    22 янв 2022 в 2:02
  • 1
    @De.Minov спасибо, выглядит действительно лучше, немного иначе пришлось решить так как background-position не имел эффекта. 22 янв 2022 в 2:23
  • 1
    Честно говоря, разлинееная textarea так себе в качестве UX решения. Я в каждом примере выше кликал сначала на вторую строку, чтобы посмотреть, как вводится текст - и ничего не происходило, потому что надо кликать в первую, идти в конец, нажимать ввод. Когда полосок нет, такой путаницы не возникает. 22 янв 2022 в 3:57
  • @AlexanderPavlov согласен, у меня было то же, это эффект Word, там переходишь туда куда кликнешь 22 янв 2022 в 15:41
-1

типа такого? https://jsfiddle.net/oLxue203/3/ если задача в том чтобы только по фокусу была линия то стиль по хов

.form-project__input:hover + label:before, .form-project__input:focus + label:before {
  top: 50px;
    opacity: 1;
}

2
  • не, надо чтобы textarea была разлинеена вниз, линии чтобы были паралельно левым инпутам, ну и по линиям текст чтобы можно было писать, я фото приложил, чтобы понятнее было
    – tiptop88
    21 янв 2022 в 21:59
  • типа так чтоли ? jsfiddle.net/4qk79tr5
    – siren
    21 янв 2022 в 22:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.