Я пишу простое приложение с формой входа в систему, и я хочу, чтобы поля имени пользователя и пароля были более интересными. И более конкретно что-то вроде этого:Какой CSS я должен применить, чтобы получить этот результат.
Это из картины. Если бы это было в Интернете, я бы проверял html, но это не так. Интересно, может ли кто-то помочь с css, потому что я не очень уверен в использовании CSS.
Вы можете использовать псевдо-элемент для этого:
.input {
margin: 5px;
width: 300px;
height: 30px;
position: relative;
border: 2px solid black;
border-radius: 5px;
}
.label {
display: inline-block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 45%;
background: black;
color: white;
text-align: center;
line-height: 30px;
}
.label:after {
content: "";
position: absolute;
right: -15px;
top: 5px;
height: 0%;
border-left: 15px solid black;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
z-index: 8;
}
.input input[type="text"] {
position: absolute;
height: 100%;
width: 50%;
left: 50%;
padding: 0;
border: none;
outline: none;
}<div class="input">
<div class="label">Username</div>
<input type="text" placeholder="input here" />
</div>
<div class="input">
<div class="label">Password</div>
<input type="text" placeholder="input here" />
</div>
Это объединяет CSS градиенты, треугольник штуковина, текстуру фона изображения, границы и границы радиуса, чтобы сделать круглые углы. .. Таким образом, вам нужно будет полностью изучить CSS для этого. [Попробуйте учебник.] (Https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started) –