The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Text Input fields of varying length w/in same form?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #164171

    I’m sure this is possible, I’ve just never had to do it before because most requesters like consistency.

    I need to have one input field a different length than the others in the same form. I’m assuming I could apply a class to the input field in question, but I’m just not having much success making it happen. Maybe my approach is all wrong.

    I want to apply a longer length to the <label id="prefPharm"> input text field, making it as long as the textarea below it.

    Can someone take a look at my codepen and let me know if they have any suggestions?

    Much appreciated! Thanks!


    Thanks Mottie. I’ll have to play around with that.

    In the meantime, I found some info on the Contact Form 7 plugin for WordPress site about manipulating their form. The site, specifically the bit about “Style Specific Fields”.

    Based on their info and some guesswork, I discovered something by accident. I don’t think this is going to be my solution, but I thought I’d share in case anyone was familiar with why it works.

    I created a .special class in the CSS, and added the Class and Type to the Input markup like so:

    <input class="special" type="text class:special" name="prefPharm" value="<%=PHARMACY2%>" id="prefPharm" />

    If I take out just the class=”special” tag, it doesn’t work. If I take out just the type=”text class:special” it doesn’t work.

    You can see what I mean here: New Codepen


    Mottie, I hope you see this. I tried your suggestion, and it works great for text fields. But can it be applied to a Select field?

    I added an attribute .chgform select#Q2 based on what we did for the text field, but it’s not working. Maybe you can take a look.

    Do I need to do something differently? Thanks!

    New codepen…


    DOH! My Name and ID attributes are usually the same, so I thought you were using the Name attribute earlier. Thanks!

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.