fbpx

How to style elementor form with just css

Do you sometimes find elementor form even with all those great features has limited designing options?

If yes, then in this video I’ll show you how to style a simple elementor form more like a material design form with just css.

In this tutorial, you will mainly learn how to style elementor form checkbox and radio buttons with css. You will also learn the basic styling of an input field.

Although I’m using a normal checkbox in this form you can use the Acceptance type checkbox it will work as a required field to acceptance consent from your users.

Here is the css

/* For Fields */
selector .elementor-field-group:not(.elementor-field-type-upload) .elementor-field:not(.elementor-select-wrapper):focus, selector .elementor-field-group .elementor-select-wrapper select:focus {
	box-shadow: none;
	border-bottom-color: #4632da;
}
selector .elementor-field-textual {
	padding-left: 0;
	padding-right: 0;
}
/* Making checkbox and radio button invisible */
selector input[type="checkbox"], selector input[type="radio"] {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
/* For Radio button */
.elementor-field-group-mt_radio > div label:before {
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-right: 0.5em;
	border-radius: 100%;
	vertical-align: -3px;
	border: 2px solid rgba(0,0,0,0.25);
	padding: 0.13em;
	background-color: transparent;
	background-clip: content-box;
	transition: all 0.2s ease;
}
.elementor-field-group-mt_radio > div label {
	margin-right: 1em;
}
.elementor-field-group-mt_radio > div input:hover + label:before {
	border-color: #4632da;
}
.elementor-field-group-mt_radio > div input:checked + label:before {
	background-color: #4632da;
	border-color: #4632da;
}
/* For Checkbox */
.elementor-field-group-mt_checkbox > div label:before {
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-right: 0.5em;
	vertical-align: -3px;
	border: 2px solid rgba(0,0,0,0.25);
	padding: 0.12em;
	background-color: transparent;
	background-clip: content-box;
	transition: all 0.2s ease;
}
.elementor-field-group-mt_checkbox > div label {
	margin-right: 1em;
	position: relative;
}
.elementor-field-group-mt_checkbox > div label:after {
	border-right: 2px solid #fff;
	border-top: 2px solid #fff;
	content: "";
	height: 11px;
	left: 2px;
	position: absolute;
	top: 11px;
	transform: scaleX(-1) rotate(135deg);
	transform-origin: left top;
	width: 6px;
	display: none;
}
.elementor-field-group-mt_checkbox > div input:hover + label:before {
	border-color: #4632da;
}
.elementor-field-group-mt_checkbox > div input:checked + label:before {
	border-color: #4632da;
	background: #4632da;
}
.elementor-field-group-mt_checkbox > div input:checked + label:after {
	-moz-animation: check 0.8s ease 0s running;
	-webkit-animation: check 0.8s ease 0s running;
	animation: check 0.8s ease 0s running;
	display: block;
	width: 6px;
	height: 11px;
	border-color: #fff;
}
@keyframes check {
 0% {
 height: 0;
 width: 0;
}
 25% {
 height: 0;
 width: 6px;
}
 50% {
 height: 11px;
 width: 6px;
}
}

Disclosure: Some of the links here are referral/affiliate links that means if you decide to buy through those links I’ll earn a commission at no extra cost to you. This is how I keep Designtheway.com up and running.

Plugins used:

Here are some of my favorite website building tools

Thank you for reading the article hope you have found this helpful. Here are some of my favorite tools that I always use and hope you will find them helpful too. Please note these are affiliate links, if you do purchase anything using my links I’ll earn a small commission at no extra cost to you. I recommend these tools to my clients and friends as well.

Web Hosting: For starting a new website, I like to use GreenGeeks. They are reliable and affordable for a beginner. They have a very simple setup process that anyone can use. I’m personally using their service for over a year now.

Page Builder: For building beautiful websites in a short period of time I like to use Elementor. It is one of the most powerful page builders in the market. You don’t need any technical knowledge to make websites.

Content Writing: When you make a website you have to add content to it. I use Grammarly to write better content. It improves the writing by checking spelling and grammar mistakes automatically. It has a premium version but for starters, the free version is a good starting point.

Advertising Network: When you have built the website and have traffic on it, ads are the easiest way to monetize the website. Adsense is the most popular choice but I recommend Ezoic which will give you a much higher earning than Adsense and the best part is it is free to use.

You may also like

Picture of Ananda Projapati

Ananda Projapati

A freelance Wordpress consultant and educator.

Recent Posts

82 thoughts on “How to style elementor form with just css”

    1. Devon, I have done nothing specifically for the place holder, I have just set the input size to medium and the font size is set from there only. There is no setting for placeholder font size in the elementor. If you want to change the font size of the placeholder you have to change the input-text font size.

      Hope this helps!

  1. Hello Ananda, thank you very much for your post, it was exactly what I was looking for and it works fine. I would also like to put the radio buttons center and not left and also give them a bigger font size. Could you tell me where in the CSS I have to put in? Thx in advance.

    1. Glad to know that it helped you Marcin, to make the radio buttons center-aligned and bigger font size you can add this following css
      selector .elementor-field-type-radio{
      justify-content: center;
      font-size: 18px;
      }

      A side note if you make the fon-size too big you have to adjust the radio button position accordingly.
      Hope this helps!

          1. Hey Ananda, the same thing didn’t work for me. I’m trying to center in-line radio buttons, horizontally.

          2. Hi Tom, the CSS in the previous comment should work just make sure there is no additional CSS overriding it. If it doesn’t work please share the link will check and let you know the solution.

            Hope this helps!

  2. Hi
    I have a question about Acceptance message . When a customer checks the Acceptance box, the email and email2 show the box was checked with the message :”on”
    I would like to change “on” to something in Japanese. Where can I edit the reply”on”.
    Thank You
    Steve

        1. Hi Steven,
          Got your point but I don’t think you can change that from the form editor, for that you might have to edit the widget files and in my view, that is not the best option.
          The main purpose of that acceptance filed is to connect the marketing permission settings with your email service provider not so much to just send emails to the recipient/admin that is why there no such settings to modify anything.

          Hope this helps!

  3. Great Article Ananda, thanks for sharing it. I have a question to see if you can help me. I want to learn how to rearrange columns according to the screen. For example: I have 4 columns (desktop) and I want to change the order for mobiles, that is, I want the fourth column in the first position, the first in the second position and so on. I do not know the instruction in CSS to do so. Thanks in advance

    1. Glad you like it Oswald, now to your question if you are referring to elementor columns then you can re-arrange using “order” in CSS. Check this article for more details https://css-tricks.com/almanac/properties/o/order/.

      You have to add a media query to target mobile screens. So the CSS could be something like this as per your example

      @media (max-width: 767px){
      .reorder-col .elementor-column:nth-of-type(1) { order: 2; }
      .reorder-col .elementor-column:nth-of-type(2) { order: 4; }
      .reorder-col .elementor-column:nth-of-type(3) { order: 3; }
      .reorder-col .elementor-column:nth-of-type(4) { order: 1; }
      }

      Hope this helps!

    1. Glad you liked the article Marshall, yes you can turn the labels into a button style with CSS and when the radio button is checked change the button style accordingly to make it look active. You need to alter the CSS a bit.

      Hope this helps!

  4. Hi Ananda. What an amazing CSS tricks you are sharing with us. Thanks a lot for your efforts you are showing towards us.

    Just have one question that how can we replace default radio button to an image radio button in elementor form through CSS.

    Eagerly waiting for your reply. Please reply ASAP.

    Thanks☺️

    1. Hi Hardik,

      Thanks for your kind words, yes you can use an image for radio buttons, just tweak the css a bit in place of background-color use background:url() same goes for the activate state as well.

      Hope this helps!

  5. Hey Ananda,

    A really helpful article here, bookmarking this website for sure!
    Is there a way to make the elementor form go to the next step right after a a radio button is selected? Thanks in advance!

    1. Glad that it helped you Abhi!

      Regarding your question I haven’t tried something like this may be possible but I wouldn’t advise you to do this because elemetor has its own process for the form steps, manipulating that might cause some issue in storing the form data.

      Hope this helps!

  6. Great Info Sir.
    We really appreciate your effort and happy to see that you are providing CSS code also.
    Great work. Keep it up.
    Thanks

  7. Hi, thank you for the amazing post. I hope you can help me with this really annoying issue though. Basically I have a some radio buttons and some text inside a label. This is in a small container and when the line of text breaks and goes to the other line, I want it to be below the text and not the radio button, so in short to increase the indentation.
    So basically I want the line brake to start under the TEXT and not the BUTTON so that the text is alligned 🙂

        1. This what you can do

          span.elementor-field-option {
          display: flex;
          align-items: baseline;
          }
          span.elementor-field-option label {
          padding-left: 10px;
          }

          Please note for understanding I’m using global selectors you can be more specific.

          Hope this helps!

          1. Hi Ananda,

            after some testing I realized that the code your provided doesn’t work because I made the main radio buttons invisible and designed new ones with your code you provided in this article. But if I leave the “original” radio button then the code works perfectly! 🙂 Is there a way around it tho? So I can leave my newly designed radio button AND had the alligned texts.

            Best,
            Maxime

  8. Hi, I’m trying to get the section title and description font and color stylized, but it is not translating. It is just showing up black and my default font and won’t allow me to change it. Is there a ccs code I can put to change the font type, size, kerning and color for the Section Title & Description?

  9. how can I add “Yo It’s” with a little opacity inside this text box? I’m using Contact Form 7 in elementor. Thanks

    Your Name
    [text* your-name]

    1. Hi Dave,

      Unfortunately, you can’t add any text in a text box because we can’t use pseudo-elements in any form fields. You can do some CSS hack (using pseudo-elements) if you have a label for that particular text-box.

      Hope this helps!

  10. how can i remove the three lines in the message field please? I want the message field to be of a fixed height and when they type the text that the scroll bar in the message field shows. thank you very much for your inputs

  11. Thank you for your amazing tutorials Ananda. I’ve been using this for styling every form we have and the checkboxes.

    I’m not sure it’s okay to ask questions, I guess you’re getting a lot of them. But in case you have time: I’ve been trying to style the checkbox for Remember me on the Elementor Login widget in a similar way, but I’m unable to do it. I get the checkbox itself to show, but I can’t check it. Thank you in advance.

    1. Hi Elle, glad that my videos are helping you, now for your question I’ve not checked this with the login widget but if you can share your site link I can check and suggest you.

      Hope this helps!

  12. Leon Neuhäuser

    Hey Ananda,

    thanks for this tutorial.
    I have one question: I implemented this into my elementor form and unfortunately the error message is invisible now.
    How can I let the message appear again?

    Best regards, Leon

    1. Hi Leon,

      I checked the form again but I can see the inline error, the success message everything I couldn’t re-create the form error message as there has to be some technical error to show it. But since it is showing the success message it should show the error too and my styling has nothing to do with that section.

      Please remove the style once and check if you can see the error message or not and also let me know how to create that error message so I can check myself too.

      Hope this helps!

      Thanks
      Ananda

    1. Hi Marc,

      To align the labels to left you have to add some CSS to them like this


      selector .elementor-field-group{
      flex-flow: row;
      }
      selector .elementor-field-label {
      width: 25%;
      }

      Make sure to add this CSS in a media query for large screens only otherwise the labels will align to the left in mobiles as well.

      Regarding adding the CSS you can add them in Advanced > Custom CSS section as shown in the video.

      Hope this helps!

      1. Hi Ananda,

        Thank you very much, does this align them only to the left, or ‘left of the field’ with the field next to the text?

        Best wishes,

        Marc

  13. I am looking on whole internet for finding classes for elementor form fields like radion and all others. Thankyou so mucjh for sharing. If you cna provide all fields classes in pdf then it will be great .
    Thankyou

  14. How do you get this to work for the Elementor Login widget? The :before pseudo element is working, but the :after isn’t.

    Any help would be highly appreciated!

    Thanks.

    1. Hi Ms,

      To make any radio button checked go to the advanced tab of that item and write the default value in the “Default Value” field. For example, in my demo form, I have Marketing as the second option to make it checked I need to write “Marketing” in the “Default Value” field.

      Hope this helps!

  15. Hi You seem to be helping people a lot here I hope you can help me

    In elementor forms (using wpforms at moment crazy expensive) I’ve been told to add various css code to make the date format UK DD/MM/YYYY instead of American none of it seems to work

    Can you possible try to assist, thanks in advance

  16. Hi Ananda Projapati,

    Thanks for sharing this CSS. Very helpful.

    I have one more requirement that I can’t find on internet.

    I want to add Padding and colors to the Elementor form Select field options.

    I tried these CSS:
    option{padding: 10px 16px !important;}

    But not working. You can check the demo: https://imgur.com/a/HSDm0Iu

    Hope you have an Idea. Pls make a video or reply here.

    Looking forward your reply.

    Regards,
    Dhinesh

    1. Hi Dhinesh,

      Glad you liked the post, regarding your query unfortunately the Select element is one of those elements in CSS that can’t be styled much. To style, you need custom HTML elements which we can’t add in Elementor form.

      Hope this helps!

  17. Hi. This is a great tutorial. I’m trying to make an Acceptance checkbox on my elementor form bigger (3-4X current size) and keep the acceptance copy centered vertically with the checkbox but can’t seem to figure out what class or CSS code would apply.

    The form can be viewed on https://vexas.inregdev.com/stay-connected

    Any help would be greatly appreciated.

    1. Hi Joe,

      Glad you liked the post, regarding your query you have to adjust width and height of the checkbox CSS as per your requirements.
      For vertically aligning the text you have to play around with the CSS.

      Since I don’t have the demo setup now can’t give the exact CSS.

      Hope this helps!

  18. Hello Ananda,

    Thank you for making such a lovely post detailing Elementor Form changes. I applied what you suggested for the checkbox fields. It works well on Desktop views, however, when i switch to tablet portrait and below, the styling is there but the checkbox cannot be selected. I have tried making some changes, but was unable to get it to work.

    Just so you know, i have two forms, one form is displayed on large screens and the other form is displayed on tablet devices and smaller. I hide container the form is in depending on the device used.

    Your help would be greatly appreciated.

    1. Hi Shady,

      Glad you liked the post.

      If you can share the link it would be easy to look into the issue. Without checking it is hard for me to suggest anything.

      Hope you understand.

      Thanks!

  19. Hi Ananda,

    Fantastic tutorial, thank you so much. It did exactly what I wanted.

    It has however, caused another problem… I have my form in a pop up and when your code is added the checkboxes in the pop up are no longer clickable/selectable. They work fine in the same form that is not in a pop up though. I’ve tried changing the pop up settings to see if they help but no combination seems to work.

    Is this something yo have come across before? If so, do you know how to fix it?

    Many thanks
    nthn

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.