[Resolved] Clean Input Areas

[Jesse]

Hello,

All my text input areas (comment forms, contact forms) all look the same and all have a “box look” to them. Particularly, the border that appears around each input box. More so on mobile, where for some reason the horizontal border across the top of each box appears even more thick than the rest of the border.

Here is an example of how I would like to style my input areas (clean, no borders):

https://snipboard.io/qTmLsB.jpg

But I would want this style to appear across my entire site for all input areas, not only the comments.

Can this be done?

Best regards,
Jesse

[Ying]

Hi Jesse,

I assume the forms are from different source, then they’ll need to be targeted separately in css.

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[Jesse]

Sorry! I thought I included that in the initial post, but must not have!

I thought it was interesting how the text input boxes in my contact form are styled exactly the same as the comment forms, so I thought it was a global style or maybe the contact form inherits it from the theme?

Best regards,
Jesse

[Leo]

Try this CSS:

input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], textarea, select {
    border-radius: 5px;
    border-color: transparent;
    background-color: #f7f7f7;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Jesse]

It works, thanks! I ended up wanting a thin border, so I switched it to this:

input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], textarea, select {
    border-radius: 0px;
    border-color: #E6E6E6;
    background-color: #F7F7F7;
}

But then it added that extra thick border on the top when looking at it on iOS. I was able to resolve that by adding:

background-clip: padding-box;

[Leo]

Glad to hear 🙂

[Author]

Posts