Bardzo proszę o pomoc. Mam 2 problemy.
1. Nie wiem pozycjonować wysokość kursora w polu. Chciałbym, aby wpisywany tekst był na tej samej wysokości do placeholder.
2.Nie wiem jak zrobić, aby tekst wpisywany w input type="text" zawijał się, gdy użytkownik dojdzie do jego krawędzi i tym samym wysokość inputa będzie się w razie potrzeby zwiększała.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Brief - BAZAstudio</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,900&display=swap&subset=latin-ext" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<p id="bazaLogo"><span id="bazaLogoFirstEl">BAZA</span>studio</p>
<div class="intro">
<p>Wypełnienie poniższego briefu pozwoli nam opracować ofertę dopasowaną do Państwa oczekiwań oraz zaoszczędzi czas, <br>który jest potrzebny, aby przygotować się do prac nad projektem. Każda informacja jest dla nas cenna, dlatego polecamy wypełnić <br>cały brief, a wszystkie dodatkowe materiały przesłać razem z briefem.</p>
</div>
<form class="contact-form" action="contactform.php" method="post">
<div class="inputWrapper">
<p>Nazwa firmy / klienta</p>
<input type="text" name="nazwaFirmy" id="test-input" class="inputLong" placeholder="Fruktar spółka z o.o.">
</div>
<div class="inputWrapper">
<p>Twój adres e-mail</p>
<input type="email" name="mail" class="inputLong" placeholder="Twój adres e-mail">
</div>
<input type="text" name="terminRealizacji" placeholder="scenariusz - 1.10.2020, storyboard - 5.10.2020, deadline - 15.10.2020">
<input type="text" name="przedmiotProjektu" placeholder="Montaż materiału filmowego do spotu reklamowego">
<input type="text" name="budżet" placeholder="8 000 zł">
<input type="text" name="polaEksploatacji" placeholder="Telewizja">
<input type="text" name="ilośćMateriałów" placeholder="2 filmy - pierwszy długość 1 minuta, drugi długość 30 sekund">
<input type="checkbox" id="brak" name="lektor-BRAK" value="BRAK">
<label for="brak">brak</label>
<input type="checkbox" id="female" name="lektor-KOBIETA" value="KOBIETA">
<label for="female">kobieta</label>
<input type="checkbox" id="male" name="lektor-MEŻCZYZNA" value="MEŻCZYZNA">
<label for="male">mężczyzna</label>
<input type="text" name="lektor-język" placeholder="język polski">
<input type="checkbox" id="subtitlesNone" name="napisy-BRAK" value="BRAK">
<label for="subtitlesNone">brak</label>
<input type="checkbox" id="subtitlesPL" name="napisy-językPL" placeholder="polski" value="POLSKI">
<label for="subtitlesPL">język polski</label>
<input type="text" name="napisy-językOther" placeholder="inne ...">
<input type="checkbox" id="scriptYes" name="scenariuszYes" value="POSIADAM">
<label for="scriptYes">posiadam</label>
<input type="checkbox" id="scriptNo" name="scenariuszNo" value="PRZYGOTUJMY NOWY">
<label for="scriptNo">przygotujmy nowy</label>
<input type="text" name="cel" placeholder="Odświeżenie wizerunku firmy">
<input type="text" name="targetGroup" placeholder="Konsumenci w przedziale wiekowym od 14 do 28 lat">
<input type="text" name="opis" placeholder="Opis - przykładowy tekst placeholdera">
<input type="text" name="cechyProdukcji" placeholder="Cechy produkcji - przykładowy tekst placeholdera">
<input type="text" name="uwagi" placeholder="Dodatkowe uwagi - przykładowy tekst placeholdera">
<button type="submit" name="submit">Wyślij brief</button>
</form>
</div>
</body>
</html>
body {
background-color: #000000;
color: #ffffff;
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
}
.container {
width: 800px;
margin: 6% auto;
}
.intro {
width: 52%;
line-height: 100%;
margin-bottom: 6%;
}
p {
letter-spacing: 1px;
font-size: 0.7rem;
}
#bazaLogo {
font-size: 1.6rem;
letter-spacing: 4px;
}
#bazaLogoFirstEl {
font-weight: 900 !important;
}
.inputWrapper {
margin: 3% auto;
position: relative;
}
.inputLong {
width: 100%;
height: 80px;
border-radius: 2px;
border: 3px solid #fff;
outline: none;
transition: .5s;
}
.inputLong:focus {
border: 3px solid lightblue;
}
.inputLong::placeholder {
transform: translate(0, -150%);
padding-left: 1%;
padding-right: 1%;
}