У меня есть изображение экрана входа в систему, как указано ниже:
Есть ли способ создать подобное изображение только с помощью CSS3 и HTML5? Где подчеркивание после «Имя пользователя:» и «Пароль:» — тип ввода = «текст» без границ (чтобы пользователь мог вводить текст)
И Войти это кнопка. И все эти поля размещены внутри HTML-формы.
Вы можете стилизовать элементы следующим образом:
#box { /* Container box */
width:450px;
padding:50px;
background:#463; /* set image here */
}
#usr, #pwd { /* input boxes */
border:none;
border-bottom:3px solid white;
background:transparent;
color:#fff;
font:bold 24px sans-serif;
}
#box > div { /* container for lines (label + input) */
margin-bottom:26px;
}
#box > div > label,
#box > button {
color:#fff;
font:bold 24px sans-serif;
}
#box > button { /* A simple button */
background:transparent;
border:none;
text-align:center;
color:#ff0;
width:100%;
}
Какой-то фиктивный html:
<div id="box">
<div>
<label for="usr">Username:</label>
<input id="usr">
</div>
<div>
<label for="pwd">Password:</label>
<input id="pwd" type="password">
</div>
<button id="login">Login</button>
</div>
Просто замените фон для доски изображением, которое вы используете, и используйте фактический шрифт.
