My website has three contact fields, and I want them to have a thicker border when selected. I attempted to use "field:focus"... but now I'm facing the issue that it only works for one of the three fields.
.contactForm {
background-color: rgb(118, 143, 197);
padding-top: 60px;
padding-bottom: 140px;
}
.contactForm p {
color: rgb(255, 255, 255);
margin-bottom: 60px;
}
.contactFormHeading {
color: rgb(255, 255, 255);
margin-bottom: 10px;
font-weight: lighter;
}
.contactFormHeading p {
color: rgb(255, 255, 255);
font-weight: lighter;
margin-bottom: 40px;
}
.contactFormContent {
color: rgb(255, 255, 255);
list-style-type: none;
line-height: 270%;
}
.contactFormInput {
width: 100%;
margin-bottom: 28px;
}
.contactFormInput:focus {
border-color: rgb(30, 30, 30);
border-width: 0.25rem;
}
.contactFormMessage {
height: 140px;
}
input.contactFormSubmit[type="submit"] {
background-color: rgb(255, 255, 255);
}<div class="columns six">
<input class="contactFormInput" type="text" placeholder="Your Name *" required="required" />
<input class="contactFormInput" type="text" placeholder="Your Email *" required="required" />
<textarea class="contactFormInput contact-message" placeholder="Your Message *" required="required"></textarea>
<input class="contactFormSubmit" type="submit" value="Send Message" />
</div>I have included two additional images in this question
.contactFormInput {
width: 100%;
margin-bottom: 28px;
background-color: rgb(255,255,255);
}
.contactFormInput:focus,
input.contactFormInput:focus {
border: 1px solid rgb(30,30,30);
background-color: rgb(230,230,230);
}
.contactFormMessage {
height: 140px;
background-color: rgb(255, 255, 255);
}