Jump to content

How to style webform date picker?


newcoder1010
 Share

Recommended Posts

Hello,

HTML:

<div class="webform-container-inline webform-datepicker">

<div class="form-item form-item-submitted-personal-information-birth-date-month form-type-select form-group">

<select class="month form-control form-select" required="required" id="edit-submitted-personal-information-birth-date-month" name="submitted[personal_information][birth_date][month]">

<option value="" selected="selected">Month</option>

<option value="1">Jan</option>

<option value="2">Feb</option>

</option>

</select>

<label class="control-label element-invisible" for="edit-submitted-personal-information-birth-date-month">Month</label>


</div>

<div class="form-item form-item-submitted-personal-information-birth-date-day form-type-select form-group">

<select class="day form-control form-select" required="required" id="edit-submitted-personal-information-birth-date-day" name="submitted[personal_information][birth_date][day]">

<option value="" selected="selected">Day</option>

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

</select> 

<label class="control-label element-invisible" for="edit-submitted-personal-information-birth-date-day">Day</label>


</div>

<div class="form-item form-item-submitted-personal-information-birth-date-year form-type-select form-group">

<select class="year form-control form-select" required="required" id="edit-submitted-personal-information-birth-date-year" name="submitted[personal_information][birth_date][year]">

<option value="" selected="selected">Year</option>

<option value="1888">1888</option><option value="1889">1889</option><option value="1890">1890</option><option value="1891">1891</option>

<option value="1892">1892</option><option value="1893">1893</option><option value="1894">1894</option><option value="1895">1895</option><option value="1896">1896</option><option value="1897">1897</option>

</select>

<label class="control-label element-invisible" for="edit-submitted-personal-information-birth-date-year">Year</label>
</div>
</div>

Now Month, Day, Year display in a column. How can I display month, day and year in the same row? I tried this and I still see them in a column.

select#edit-submitted-personal-information-birth-date-year {
    width: 33%;
    float: left;
}

select#edit-submitted-personal-information-birth-date-day {
    width: 33%;
    float: left;
}

select#edit-submitted-personal-information-birth-date-month {
    width: 33%;
    float: left;
}

Please advise.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...