CSS odcinek 4 22:00 Problem z inputem type=submit

pytanie zadane 12 grudnia 2017 w HTML i CSS przez ildan91 Użytkownik (630 p.)

Witam, Mam problem z inputem o typie "submit". Mianowicie szerokość tego imputu nie jest taka sama jak imputów typu text i password. U Pana Zelenta jest normalny kod jest ten sam.

1 odpowiedź

odpowiedź 13 grudnia 2017 przez `Krzychuu Stary wyjadacz (13,940 p.)

Pokaż kod

1	komentarz 13 grudnia 2017 przez pablop76 VIP (123,160 p.) Wyjaśnione w 14min 20sek filmu :)

komentarz 13 grudnia 2017 przez ildan91 Użytkownik (630 p.)

Napisaleś o długości, mi chodzi o szerokość tych imputów :)

komentarz 13 grudnia 2017 przez ildan91 Użytkownik (630 p.)

HTML

<body>

<div id="container">
<form>
<input type="text" placeholder="login">
<input type="password" placeholder="hasło">
<input type="submit" value="zaloguj się">
</form>
</div>

</body>
</html>

CSS:

input[type=text],
input[type=password]
{width:300px;
background-color:#efefef;
color:#666;
border: 2px solid #ddd;
border-radius:5px;
font-size: 20px;
padding:10px;
    box-sizing:border-box;
    outline:none;
    margin-top:10px;
}

input[type=submit]
{width:300px;
    background-color:#36b03c;
    font-size:20px;
    color:white;
    padding: 15px 10 px;
    margin-top:20px;
    border:none;
    border-radius:5px;
    cursor:pointer;
    letter-spacing:2px;
    outline:none;

Proszę

komentarz 13 grudnia 2017 przez `Krzychuu Stary wyjadacz (13,940 p.)

input[type=submit]
{
    width:300px!important;
    background-color:#36b03c;
    font-size:20px;
    color:white;
    padding: 15px 10 px;
    margin-top:20px;
    border:none;
    border-radius:5px;
    cursor:pointer;
    letter-spacing:2px;
    outline:none;
}

spróbuj w ten sposób

komentarz 13 grudnia 2017 przez ildan91 Użytkownik (630 p.)

Może ja się źle wyraziłem w języku programowania chodzi mi o to, że atrybut height dla imputu submit jest mniejszy ( przycisk jest węższy niż imput text i password)

komentarz 13 grudnia 2017 przez `Krzychuu Stary wyjadacz (13,940 p.)

input[type=submit]
{
    width:300px;
    background-color:#36b03c;
    font-size:20px;
    color:white;
    padding: 10px;
    margin-top:20px;
    border:none;
    border-radius:5px;
    cursor:pointer;
    letter-spacing:2px;
    outline:none;
}

chodzi ci o to że przycisk jest wysokością większy niż input type text?, jeżeli tak to musisz zmienić padding inputu

komentarz 13 grudnia 2017 przez ildan91 Użytkownik (630 p.)

chodziło mi o to, że imput "submit" był węższy niż imputy text i password. Inaczej jego height był mniejszy. Ale po przeczytaniu Twojej podpowiedzi, zwróciłem uwagę na padding i okazało się, że miałem spację miedzy 10, a px co dawało taki efekt zwężenia.