[Resolved] How to change default look of form fields and buttons

[Halil]

How can I change the default look of form fields (input fields) and buttons (like Subscribe button)?

there are some space between them which is greater than I like and I’d like to have a bit rounded corners. Should I edit css for each form or is there a way to change default look.

[Leo]

Hi there,

Looks like you are able to achieve what you want already?

GP has buttons colors in the customizer, other customization require some CSS for sure.

Let me know if you need help with the code.

[Halil]

Yes I did but I wrote a css code spesific to each form. How can I change the padding/width/height etc when I have multiple input fields and submit button.

I’d like to write one css to rule them all form behavior. (like changing the color of a button in customizer so it’ll apply to all buttons)

[Leo]

This selector should take care of all the input area:
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], textarea, select

Sometimes the plugin you are using to might have their own style to overwrite the form though. Best to learn to use inspect element if you want to do lots of coding 🙂

[Halil]

thanks. I’ll check them.

[Leo]

No problem!

[Halil]

I did checked them and I couldnt do something I want. I am really bad with inspect element.

https://powerbi.istanbul/dax-ve-veri-modelleme/

On this page, in the sidebar bottom, both input and submit fields should be inline for tablets/desktops but they are not! What should I add or change so that this 2 fields are always inline for screen sizes greater than phone (580?)

For phone I wrote something like @media( max-width: 580px ) … It looks working, however I’d like to have both fields are equally sized but submit button looks short. Can I do something for this?

there is also another form on the page site? How do I write css for spesific forms? How will I say change input field for form lets say 1580?

[Leo]

They are stacked on top of each other on mobile because of this CSS you’ve added:

@media (max-width: 580px) {
    .mc4wp-form input[type="email"] {
        display: block;
        margin-bottom: 10px;
        width: 100%;
    }
}
@media (max-width: 580px) {
    .mc4wp-form input[type="submit"] {
        display: block;
        margin-bottom: 10px;
        width: 100%;
    }
}

display: block and width: 100% makes them stack on top of each other. Remove the CSS should make them inline.

To make the size of the submit button bigger, you can try increasing the left and right padding of the button:

input[type=submit] {
    padding: 10px 70px;
}

[Halil]

thanks Leo,

I have deliberately written this code for mobile, they should stacked on top of each other for mobiles.

For other screen sizes, othen then mobile, they should be inline but they are not!

what should I add to force it ? any comment will help.

[Leo]

They are inline to me on desktop: https://s18.postimg.org/pcp5otgmh/2018-02-05_1528.png

When I try resizing the browser window, they stay inline until there isn’t enough space at around 1480px:
https://s18.postimg.org/x5fth5wzt/2018-02-05_1530.png

Then there is simply not enough space and I don’t think there is a way for it.

[Halil]

thanks for checking out Leo.

[Leo]

No problem 🙂

[Author]

Posts