У меня есть раскрывающийся список в моем TopBar, построенный с помощью CSS Bootstrap CSS.
У меня есть 3 проблемы, с которыми я не могу найти решение:
- Поля ввода текста и пароля слишком велики, как я могу их настроить? Создание окна выпадающего окна было бы тоже ОК.
- Ярлыки для полей слишком темные, как я могу немного осветить их?
- Откроется окно, когда я нажимаю на одно из полей. Мне нужно его снова открыть, а затем я могу напечатать до щелчка в следующем поле. Значения сохраняются, даже если раскрывающийся список закрыт. Как я могу заставить его оставаться открытым?
Вот скриншот проблем 1 и 2:
Также здесь HTML для TopBar, как и сейчас.
<div class='topbar-wrapper'>
<div class='topbar'>
<div class='topbar-inner'>
<div class='container'>
<h3>
<a href="/">Webworld</a>
</h3>
<ul class='nav'>
<li>FILLER...</li>
</ul>
<ul class='nav secondary-nav'>
<li class='dropdown' data-dropdown='dropdown'>
<a href="#" class="dropdown-toggle">Login</a>
<div class='dropdown-menu' id='signin-dropdown'>
<form accept-charset="UTF-8" action="/sessions" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="4L/A2ZMYkhTD3IiNDMTuB/fhPRvyCNGEsaZocUUpw40=" /></div>
<fieldset class='textbox'>
<label id='js-username'>
<span>Username</span>
<input autocomplete="on" id="username" name="username" type="text" />
</label>
<label id='password'>
<span>Passwort</span>
<input id="userpassword" name="userpassword" type="password" />
</label>
</fieldset>
<fieldset class='subchk'>
<input name="commit" type="submit" value="Log In" />
</fieldset>
</form>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
Там скрытый ввод необходим рельсами и автогенерируется.
Я уже пытался скопировать реализацию формы входа, которую использует твиттер, но когда я это пробовал, TopBar имеет размер 250 пикселей в высоту, а содержимое раскрывающегося списка открыто, а не закрывается.
У меня нет пользовательских CSS или JavaScript до сих пор, кроме верхнего заполнения 40px в теле, как это было предложено документами для загрузки.
Может кто-нибудь мне помочь?