2 replies [Last post]
mooseshoes
mooseshoes's picture
Offline
newbie
Corona, CA
Last seen: 2 years 43 weeks ago
Corona, CA
Timezone: GMT-8
Joined: 2017-02-07
Posts: 2
Points: 3

All:

I'd like to enhance the CSS stylesheet for a template form and allow for different width fields as needed for different input data (eg. state, street address, phone number etc.). At present there is only one set length and I haven't been successful figuring out how to incorporate others. I will provide sample HTML and CSS below.

Thanks in advance for your help.

Steve

CSS

.sigPad input[type="text"], 
.sigPad .row input[type="password"], 
.sigPad  select, 
.sigPad  textarea { 
    background:#f5f5f5; 
    box-shadow: 0 0 5px rgba(0,0,0,.1), 
        0 2px 2px rgba(0,0,0,.1) inset; 
    -moz-box-shadow: 0 0 5px rgba(0,0,0,.1), 
                     0 2px 2px rgba(0,0,0,.1) inset; 
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.1), 
                     0 2px 2px rgba(0,0,0,.1) inset; 
    border: 1px solid #c5c5c5; 
    border-radius: 3px; 
    -moz-border-radius: 3px; 
    -webkit-border-radius:3px;}
 
.sigPad input[type="text"], 
.sigPad .row input[type="password"] { 
    width: 268px; 
    padding: 1px 10px; 
    height: 33px; 
    line-height: 33px;}

HTML

<div class="row">
  <div class="item">
    <label for="FirstName">First name:<em>*</em></label>
    <input type="text" 
           name="FirstName" 
           placeholder="John" 
           required />
 
    <p class="hint">Your username can only contain letter A-Z or numbers 0-9</p>
  </div>
  <div class="item last">
    <label for="LastName">Last name:<em>*</em></label>
    <input type="text" 
           name="LastName" 
           id="LastName" 
           placeholder="Smith" 
           required />					
  </div>
</div> <!--row-->

//mod edit: reformatted using the code button for ease of reading. ~gt

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 hours 59 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

Determined how?

Do you know how wide you want each control to be?

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

mooseshoes
mooseshoes's picture
Offline
newbie
Corona, CA
Last seen: 2 years 43 weeks ago
Corona, CA
Timezone: GMT-8
Joined: 2017-02-07
Posts: 2
Points: 3

Thank you Gary. You are too

Thank you Gary. You are too kind.