[Resolved] Clean Input Areas

Home Forums Support [Resolved] Clean Input Areas

Home Forums Support Clean Input Areas

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1602479
    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

    #1603013
    Ying
    Staff
    Customer Support

    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 🙂

    #1603038
    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

    #1603166
    Leo
    Staff
    Customer Support

    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/

    #1604214
    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;

    #1607212
    Leo
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.