Это мой HTML, я использую угловой, но не уверен, что моя ошибка очень проста или я сумасшедший, смеется. Я поместил div вокруг текстового поля и поместил его rel, в то время как текстовое поле abs, фон должен быть в div, а текстовое поле должно располагаться поверх него. Я не применил это непосредственно к текстовому полю, которое я пробовал и работал, однако это проблема для моего текста, текст выходит за рамки цветного фона.
HTML
<div class='email'>
<p> Have Questions?
</p>
<form>
<div class='backg'>
<input placeholder='Name:'>
</div>
<div class='backg'>
<input placeholder='Email:'>
</div>
<div class='mess'>
<textarea class='message' placeholder='Message'>
</textarea>
</div>
</form>
</div>
Это мой scss , что не очень хорошо.
Я все еще новичок в 18 лет, поэтому не могли бы вы дать мне несколько приятных советов.
* 1013 СКС *
.email {
width:100%;
height:400px;
p {
width:100%;
height: 30px;
font-size: 20px;
}
.backg {
height: 60px;
background-image: url('/assets/images/back.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 80%;
input {
width:100%;
height: 100%;
text-indent: 50px;
color: black;
border:none;
background-color: transparent;
font-size:15px;
margin:0px;
padding:0px;
font-weight: 400;
font-family: monospace;
position: absolute;
z-index: +5;
}
}
.mess {
width:40%;
display: flex;
flex-wrap: wrap;
height:150px;
background-image: url('/assets/images/back.png');
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
}
.message {
width:100%;
position: absolute;
z-index: +5;
height:150px;
color: red;
font-size: 20px;
text-indent: 50px;
}
::placeholder {
color: black;
font-weight: 400;
font-size:15px;
font-family: monospace;
}
}