Try the following markup:
body {
margin: 0;
}
.my-form {
background-color: rgb(230, 214, 210);
color: rgb(0, 0, 0);
padding: 16px;
}
.my-form__title {
margin-top: 0;
}
.my-form__label {
margin-top: 12px;
display: block;
}
.my-form__label_title {
display: block;
font-weight: 600;
}
.my-form__input {
background-color: transparent;
border: none;
border-bottom: 1px solid rgb(67, 37, 70);
}
.my-form__button {
background-color: rgb(64, 50, 63);
color: rgb(255, 255, 255);
width: 181px;
padding: 20px;
margin-top: 12px;
}
<form class="my-form">
<h2 class="my-form__title">Form</h2>
<label class="my-form__label">
<span class="my-form__label_title">Name</span>
<input type="text" class="my-form__input">
</label>
<label class="my-form__label">
<span class="my-form__label_title">Email</span>
<input type="text" class="my-form__input">
</label>
<button class="my-form__button">Send</button>
</form>
You should sue the correct semantic tags for accessibility reasons!
Simply remove the default styles of the inputs and textarea. Then add the underline with a border-bottom
.
For more details see the inline comments in CSS:
/* removes the default fieldset styling */
fieldset {
border: none;
padding: 0;
}
/* gives the legend the same font-size and weight as the h2 tag */
legend {
font-size: 1.5em;
font-weight: bold;
}
/* gives the underline to a label and input */
fieldset > div {
border-bottom: 1px solid black;
width: 50%;
padding: 0.5em 0;
}
/* gives the label the same font-size and weight as the h3 tag */
label {
font-size: 1.17em;
font-weight: bold;
}
/* removed the default style of the input and textarea */
input:not([type="submit"]),
textarea {
border: none;
background: transparent;
}
/* removes the default style of a textarea */
textarea {
resize: none;
border-bottom: 1px solid black;
width: 100%;
}
<form>
<fieldset>
<legend>Form</legend>
<div>
<label for="name">Name</label><input type="text" id="name" placeholder="Your Name">
</div>
<div>
<label for="email">Email</label><input type="email" id="email" placeholder="Your Email">
</div>
<textarea></textarea>
<input type="submit">
</fieldset>
</form>
You need to be specific about what you need. I will start with reading about