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.

You may also like

Ananda Projapati

Ananda Projapati

A freelance Wordpress consultant and educator.

Recent Posts

free wordpress training

30 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!

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).