Форма наименьшего размера - PullRequest
1 голос
/ 23 марта 2019

Название может быть немного расплывчатым, но это лучшее объяснение моей проблемы.Я что-то напутал в своем коде CSS, который в настоящее время сохраняет мою форму в странном размере, где ширина где-то около 0.

Я добавил картинку, чтобы показать, как она выглядит:

This is the problem

Я пытался добавить width: 100px; в свой файл CSS, но ничего не получилось.Вот код CSS и HTML:

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
select,
textarea {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    background: rgba(144, 144, 144, 0.075);
    border-radius: 0;
    border: none;
    border: solid 1px #dbdbdb;
    color: inherit;
    display: block;
    outline: 0;
    padding: 0 1em;
    text-decoration: none;
    background-color: grey;
    width: 100px;
}

input[type="text"],
input[type="password"],
input[type="email"],
select {
    height: 2.75em;
    width: 100px;
}

textarea {
    padding: 0.75em 1em;
    margin-bottom: 20px;
    resize: vertical;
    width: 100px;
    height: 100px;
}
<?php
    if(isset($_SESSION["username"]) and $_SESSION["username"] == "No User")
    {
        echo"<form action='index.php' method='post'>
        <input type= 'text' name='gebruikersid' placeholder='Gebruikersnaam' size='20' maxlength='20' required>
        <input type= 'email' name='mail' placeholder='Email Addres' size='20' maxlength='50' required>
        <input type= 'password' name='wachtwoord' placeholder='Wachtwoord' size='20' maxlength='30' required>
        <input type= 'password' name='wachtwoordcheck' placeholder='Wachtwoord bevestigen' size='20' maxlength='30' required>
        <input type= 'text' name='voornaam' placeholder='Voornaam' size='20' maxlength='30' required>
        <input type= 'text' name='achternaam' placeholder='Achternaam' size='20' maxlength='30' required>
        <select name='sekse'>
            <option value='Man'>Man</option>
            <option value='Vrouw'>Vrouw</option>
        </select>
        <input type='submit' name='reg' value='Registreer'>

        </form>";
    }
?>

По какой-то причине, когда я запускаю это из переполнения стека, похоже, что он должен выглядеть.Означает ли это, что в этой части кода нет ничего плохого?Потому что в этом случае мне придется пойти посмотреть на другие части, но я не был уверен.

Ответы [ 2 ]

5 голосов
/ 23 марта 2019

Код кажется абсолютно правильным. Проверьте унаследованные стили. Вы можете легко найти его в Chrome Dev Tools. На панели инструментов CSS вы можете найти полный список селекторов и свойств, которые влияют на каждый конкретный элемент.

С картинки похоже, что где-то пройден красный контур. Попробуйте найти этот селектор (если он не отлаживается).

0 голосов
/ 23 марта 2019

По какой-то причине изменения в моем файле CSS не отображаются на моем компьютере.Я пошел к своему телефону, и изменения были применены.Изменение ширины сработало, но только не на моем ПК.Очень странно.Это, вероятно, недостаток моего школьного сервера.

Во всяком случае, код на самом деле работает, просто не отображается непосредственно на моем компьютере.

Если у кого-то еще есть эта проблема, вы просто используете: Ctrl + Shift + R , чтобы очистить кэш, после чего следует добавить изменения в файл .css.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...