Very Curious Very Curious - 2 months ago 11
CSS Question

Fitting parent width for select in HTML5 and CSS

I am trying to make these two Selects to fit their parent, but still no success. It looks like this:

It is accomplished by a Table and those two Selects are placed in new Table in one of the cell of the parent Table.

This is the code I am using.

HTML:

<div id="content">
<form id="formContent">
<table>
<tbody>
<tr>
<td><label for="fullName">Full Name</label></td>
<td><input id="fullName" type="text" name="fullName" required></td>
</tr>
<tr>
<td><label for="email">E-mail</label></td>
<td><input id="email" type="email" name="email" required></td>
</tr>
<tr>
<td> <label for="day">Birthday</label></td>
<td>
<table>
<tr>
<td>
<select name="day" id="day" class="styled-select" required>
<option></option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</td>
<td>
<select name="month" id="month" required>
<option></option>
<option value="1">January</option>
<option value="2">February</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</form>
</div>


CSS:

#content {
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 293px;
margin: -8% 0 0 -156px;
}

#formContent{
background:rgba(255,255,255,0.9);
font-weight: normal;
font-size: 0.7em;
padding: 1em;
text-align: right;
}

td { border: 0px solid black; margin:0; padding:0; width: 100%; }

input[type=text], input[type=email], select {
background-color: #FFFEFD;
border: solid 1px #F15922;
color: #000000;
height: 1.4em;
padding-left: 1em;
}


select {
-webkit-appearance: button;
-webkit-user-select: none;
background-image: url("../img/arrowR.png");
background-position: center right;
background-repeat: no-repeat;
padding-left: 1em;
float: right;
}

Answer

try this

        <table class="mytable">
          <tr>
            <td class="styled-select">
              <select name="day" id="day"  required>
                <option></option>
                <option value="1">1</option>
                <option value="2">2</option>            
              </select>
            </td>
            <td class="styled-select2">
              <select name="month" id="month"  required>  
                <option></option> 
                <option value="1">January</option>
                <option value="2">February</option>         
              </select>                    
            </td>
          </tr> 
        </table>

and css

.mytable{width:100%}

.styled-select2
{
width:70%
}


select{width:100%}

.styled-select 
{
width:30%;
}

here is a fiddle