fbpx

How to style elementor form with just css

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

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:

You may also like

Ananda Projapati

Ananda Projapati

A freelance Wordpress consultant and educator.

Recent Posts

free wordpress training

49 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

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.

Scroll to Top
website design illustration

Learn The Exact Steps I Follow To Create WordPress Websites

Easily create WordPress websites for yourself and others following my 2 hrs FREE WordPress Training (Video).