Manipulacja tekstem w input

pytanie zadane 19 grudnia 2019 w HTML i CSS przez kralcz88 Obywatel (1,810 p.)

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%;
}

3 odpowiedzi

odpowiedź 19 grudnia 2019 przez Tomek Sochacki Ekspert (227,510 p.)

odpowiedź 19 grudnia 2019 przez kralcz88 Obywatel (1,810 p.)

odpowiedź 21 grudnia 2019 przez pirouetti Mądrala (6,490 p.)

Input to tylko jedna linijka tekstu.

Dla więcej linijek potrzeba użyć textarea:

https://stackoverflow.com/questions/6262472/multiple-lines-of-input-in-input-type-text

Jeżeli chcesz manipulować wysokością na której znajduje się tekst w inpucie wystarczy zamiast nadawać height dodać padding na górze inny, na dole może być większy, jeśli chcesz żeby tekst wyświetlał się wyżej niż na środku.

Jednak drugiej linijki tekstu nie będzie w inpucie.

Jeśli już podpisujesz powyżej danego inputa czy textarea do czego są przeznaczone, to placeholdery są moim zdaniem zbędne.