CSS Issue: Tel, Email, Drop Down All Different

  • I’m having issues with the CSS. I’ve seen lots of threads on this before, but none of the solutions have helped me. I’m trying to get the same height and width for every form, but telephone, email, and the drop-down menus are all slightly different.

    I am using Chrome. Here’s a screenshot: https://s12.postimg.org/c0azg9del/css.jpg

    And here’s the specific edits to the CSS I’ve implemented for the styling.

    input[type="text"],
input[type="email"],
input[type="tel"],
input[type="menu"],
textarea
{
    background-color: #DDD;
    color: #000;
    width: 200px;
	height: 25px;
	border: 1px solid #436907;
	text-indent: 5px;
}

.wpcf7 select {
    background-color: #DDD;
    border: 1px solid #436907;
    border-radius: 0px 0px 0px 0px;
    margin: 0;
    padding: 0px 0px 0px;
    text-indent: 5px;
    width: 200px;
    height: 25px;
    z-index: 100;
}

.wpcf7 textarea  {
  height: 175px;
  width: 200px;
}

    Would appreciate any help! Thanks.

    https://www.ads-software.com/plugins/contact-form-7/

Viewing 6 replies - 1 through 6 (of 6 total)

  • Please include a link to your Contact Form 7 form so we can examine your form in detail.

    Once we understand how the HTML and CSS is configured in your CF7 form, we should be able to see the CSS changes you need to change the appearance of the form to suit your requirements.

    Thread Starter warchiefscar

    (@warchiefscar)

    I’d prefer not to link my site. Do you want me to paste the full CSS sheet and HTML I’ve used for the form?

    The HTML is simply a basic table with the CF7 code pasted into them. Everything is formatted properly, but the phone, email and drop-down menus appear as different sizes and styles slightly.

    I believe it’s an HTML5 issue but my CF7 CSS style has specific rules for phone, email and menu, shown here:

    input[type="email"],
input[type="tel"],

    Only they don’t show up like that.

    Your particular problem is probably pretty easy to solve with URL access but time consuming & impractical without.

    You could also the tools I would use at your form’s URL to?? investigate the issue yourself. Use Firebug or Chrome Dev Tools to first understand and then change the CSS used for your CF7 form elements.

    See also Styling Contact Form for a general explanation of styling CF7 forms using CSS.

    There is a link at the bottom of the page to a comprehensive and detailed article on Styling Contact Form 7 Forms. The article shows people, with suitable HTML & CSS skills, how to change the appearance of their Contact Form 7 Forms to meet their particular requirements.

    Thread Starter warchiefscar

    (@warchiefscar)

    Hi Buzz,

    Okay, sorry. I emailed you the URL through your website contact form. I’ve studied the Styling Contact Form link and utilized their methods, but the forms still look different. I looked at your in-depth SCF tutorial, but am not familiar with CDT or Firebug and can’t study them today unfortunately.

    I’m hoping having my URL will help you enough.

    Thanks for the help!

    @warchiefscar – sorry as a policy I ignore and/or delete all requests for CF7 support emailed through my website contact form.

    Thread Starter warchiefscar

    (@warchiefscar)

    But you requested the link. I emailed you because I’m not comfortable posting it publicly.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘CSS Issue: Tel, Email, Drop Down All Different’ is closed to new replies.