Nie chciany focus poza inputem

pytanie zadane 14 sierpnia 2020 w HTML i CSS przez Marak123 Stary wyjadacz (11,190 p.)
zamknięte 14 sierpnia 2020 przez Marak123

Mam problem z inputem a dokładnie chodzi o łapanie focusu na ten input klikając ponizej tego inputa albo powyżej

zdj:::

w tym miejscu łapie focus na inputa do wpisania e-maila nie wiem czemu

Wie ktoś może dlaczego łapie tego focusa??

css inputa tego::

input[name="email-signin"]{
    margin-bottom: 15%;
    background-color: transparent;
    border: none;
    outline: none;
    padding-top: 15px;
    padding-bottom: 0;
    border-bottom: 2px solid #FFFFFF;
    box-sizing: border-box;
}

komentarz zamknięcia: dzięki za odpowiedź i pomoc

komentarz 14 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

Możesz pokazać jeszcze kod HTML, aby można to było przetestować?

komentarz 14 sierpnia 2020 przez Marak123 Stary wyjadacz (11,190 p.)

kod html całego formularza

<form class="signin" action="">
            <i class="icon-at"></i>
            <input class="input-email-signin" name="email-signin" id="email-signin" type="email">
             <label for="email-signin"><span class="email-span-name">E-mail</span><span class="email-span-line"></span></label>
             <input class="input-password-signin" name="password-signin" id="password-signin" type="password">
             <label for="password-signin"><span class="password-span-name">Hasło</span><span class="password-span-line"></span></label>
             <input name="submit-signin" type="submit" value="ZALOGUJ">
             <span></span>
             <a href="#"></a>
</form>

komentarz 14 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

Pod inputem jest label, którego kliknięcie powoduje focus tego inputa. Nie podałeś całego CSS, żeby można było przetestować dokładnie to co widać na screenie.

komentarz 14 sierpnia 2020 przez Marak123 Stary wyjadacz (11,190 p.)

no właśnie już poradziłem sobie z problemem bo postanowiłem dokładniej przejrzeć elementy które mogą wyłapywać inputa i się okazało że napis email miał ustawione w jakimś innej stylizacji elementu ustawiłem żeby wszystkie spany się stylizowały i wystylizowało mi to na duży kontener a nie tylko na sam napis i ten kontener z napisem w środku wyłapywał focus.

dzięki za pomoc

1 odpowiedź

odpowiedź 14 sierpnia 2020 przez VBService Ekspert (255,800 p.)
edycja 14 sierpnia 2020 przez VBService

Spróbuj dodać to:

input[type="text"]{
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

Według moich ustaleń "winny" jest : margin-bottom: 15%;, on łapie jeszcze "pole" dla danego inputa.

Całość mniejwięcej tak (część kodu zgadywałem - dodałem od siebie)

<style>
input[name="email-signin"]{
    margin-bottom: 15%;
    background-color: transparent;
    border: none;
    outline: none;
    padding-top: 15px;
    padding-bottom: 0;
    border-bottom: 2px solid #000;
    box-sizing: border-box;
}
input[name="pass-signin"]{
    margin-bottom: 15%;
    background-color: transparent;
    border: none;
    outline: none;
    padding-top: 15px;
    padding-bottom: 0;
    border-bottom: 2px solid #000;
    box-sizing: border-box;
}
input[type="text"]{
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
</style>
<body>
  <input type="text" name="email-signin" placeholder="e-mail"><br>
  <input type="text" name="pass-signin" placeholder="hasło">
</body>

albo "odwróć" margin:

input[name="email-signin"]{
    background-color: transparent;
    border: none;
    outline: none;
    padding-top: 15px;
    padding-bottom: 0;
    border-bottom: 2px solid #000;
    box-sizing: border-box;
}
input[name="pass-signin"]{
    margin-top: 15%;
    background-color: transparent;
    border: none;
    outline: none;
    padding-top: 15px;
    padding-bottom: 0;
    border-bottom: 2px solid #000;
    box-sizing: border-box;
}

komentarz 14 sierpnia 2020 przez Marak123 Stary wyjadacz (11,190 p.)

No właśnie po usunięciu margin nadal łapie a po dodaniu tego co podałeś od inputa to i tak łapie. Po odwróceniu margina też łapie w połowie jednego inputa a na drugiej połowie drugiego inputa pomimo że nie klikam na inputa

komentarz 14 sierpnia 2020 przez Marak123 Stary wyjadacz (11,190 p.)

Dzięki za pomoc poradziłem sobie już źle przypisuje stylizacje do elementów i element wył wystylizowany z 2 razy a chodziło mi o 2 inne spany a wyjaśniłem to w komentarzu trochę wyżej