Скрыть поле полного имени в форме создания учетной записи

Разработка
1

Привет, команда,

Мы кастомизировали обычную форму создания учётной записи Discourse, используя сеточную раскладку, как показано ниже:

image
image828×555 24.9 KB

В данный момент мы скрыли поле «Полное имя» с помощью следующего SCSS:

.d-modal.create-account .login-form {
   form{
        .input-group:nth-child(3)
            display:none !important;
        }
   }
}

Мы скрываем поля «Полное имя» с помощью селектора nth-child, так как для указанного ниже div с классом input-group нет уникального класса:

Однако теперь мы включили вход через Google OAuth2, где поле «Полное имя» находится на 4-й позиции. В результате текущий CSS ломает форму создания учётной записи для провайдера аутентификации, как показано ниже:

image
image826×574 28.3 KB

Как я могу определить, является ли текущая форма обычной формой создания учётной записи или формой провайдера аутентификации (например, Google OAuth2), используя CSS? Это позволит мне применять стили к полям соответствующим образом.

Аналогичная проблема возникает с полем «Пароль».

Спасибо,
Саураб

2

Селектор CSS :has может подойти для вашего случая:

.input-group:has(#new-account-name) { ... }
3

Спасибо за ответ,
но селектор :has не работает.

9

По этому вопросу в личных сообщениях была небольшая переписка, но в результате к модальному окну создания аккаунта были добавлены классы. :partying_face: :balloon: