Как правильно добавить последовательность селектора CSS для границы на HTML-форме в рамках начальной загрузки 3.3.7? - PullRequest
Новая
       8

Как правильно добавить последовательность селектора CSS для границы на HTML-форме в рамках начальной загрузки 3.3.7?

0 голосов
/ 20 сентября 2018

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

<div class="container-fluid page-seven" id="pg7">
    <div class="row"> 
        <div class="col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3">
            <form id="newUser"  class="form-horizontal" method="post" action="process_form2.php" role="form">
                <div class="row" id="groupcontainer">
                    <div class="form-group">
                        <label for="req-Username"><span><i class="glyphicon glyphicon-user"></i></span>&nbsp;Username *</label>
                        <input id="req-Username" type="text" name="req-Username" class="form-control" minlength="6" placeholder="Please enter a Username minimum length 6, letters and numbers only *" required="required" data-error="Username is required." value="">
                        <div class="help-block with-errors"></div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

Это последняя попытка использования кода CSS. 

        #pg7 .row .col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3  #newUser.form-horizontal {
            border: 2px solid magenta;
            padding: 40px;
            border-radius: 5px;
        }

Ниже показано, что показано в самом низу панели инспектора в Chrome, когда я фокусируюсь на форме.элемент: без кавычек.

Цитата

"html body # pg7 div.row div.col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3 form # newUser.form-горизонтальный div # groupcontainer.row div.formgroup "

При необходимости я могу предоставить снимок экрана панели инспектора Chrome.

1 Ответ

0 голосов
/ 20 сентября 2018

Попробуйте: 

  .form-horizontal {
        border: 2px solid magenta;
        padding: 40px;
        border-radius: 5px;
    }

Также селектор класса должен начинаться с (.) Точки.и не оставляйте пробелов между объединенными классами.

...