Html CSS中的伪焦点并不适用于所有对象

我的网站上有三个联系人字段，我希望它们在被选中时有一个更厚的边框。我试图用field:focus解决这个问题。。。但我现在的问题是，这个东西只适用于三个字段中的一个

.contactForm{
背景色：rgb（118143197）；
填充顶部：60px；
填充底部：140px；
}
.联络表格p{
颜色：rgb（255、255、255）；
边缘底部：60px；
}
.contactFormHeading{
颜色：rgb（255、255、255）；
边缘底部：10px；
字体重量：较轻；
}
.表格标题p{
颜色：rgb（255、255、255）；
字体重量：较轻；
边缘底部：40px；
}
.contactFormContent{
颜色：rgb（255、255、255）；
列表样式类型：无；
线高：270%；
}
.联系人输入{
宽度：100%；
边际下限：28px；
}
.联系人输入：焦点{
边框颜色：rgb（30,30,30）；
边界宽度：0.25雷姆；
}
.contactFormMessage{
高度：140像素；
}
input.contactFormSubmit[type=“submit”]{
背景色：rgb（255、255、255）；
}

---

您现在拥有的应该可以使用

可能还有其他css或js冲突

尝试在您的

.contactFormInput

类上定义默认边框，然后使用

：focus

修改该边框

.contactFormInput {
    width: 100%;
    margin-bottom: 28px;
    border: 1px solid #ddd;
}


.contactFormInput:focus {
    border-color: rgb(30,30,30);
    border-width: 0.25rem;
}

---

他们在各个领域都在为我工作，但我仍然不工作。前两个输入字段是亮蓝色，最后一个是黑色。我在问题中又添加了两张图片