Getting Select tag to be responsive

Question

I am currently writing a responsive page using HTML5 and CSS3, and within my HTML, i have a form. The form contains a table which is responsive and collapses as the page shrinks. The only issue i have is the select tag doesn't collapse along with other form elements. Here is my HTML and CSS -

<tr>    
    <td id="content">Email Address</td>
    <td><input type="text" name="name" id="name" class="form"></td>
</tr>

<tr>
    <td id="content">Password</td>
    <td><input type="password" name="name" id="name" class="form"></td>
</tr>

<tr>
    <td id="content">Confirm Password</td>
    <td><input type="password" name="name" id="name" class="form"></td>
</tr>

<tr>
    <td id="content">Security Question</td>
    <td>
        <select class="form">
            <option value="#">--Select Question--</option>
            <option value="#">What Is Your Father's Middle Name?</option>
            <option value="#">In What Town Did You Spend Most Of Your Youth?</option>
            <option value="#">What Was Your Best Friend's Name When You Were A Child?</option>
            <option value="#">What Was Your Favorite Childhood Pet's Name?</option>
            <option value="#">What Was The Name Of Your Favorite Food As A Child?</option>
            <option value="#">What Year Did You Graduate High School?</option>
            <option value="#">Who Was Your Childhood Hero?</option>
        </select>
    </td>
</tr>

The CSS:

table { 
  width: 100%; 
  border-collapse: collapse; 
}
/* Zebra striping */
tr:nth-of-type(odd) {
    background-color:#fff; /*#eee*fixed/
}
th { 
  /*background: #fff;*/ 
  color: black; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  /*border: 1px solid #ccc; */
  text-align: left !important;
  font-size:13px;
}
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr { 
        display: block; 
    }
}

while the text boxes collapses, the select tag doesn't. Please, how do i resolve this?

Solution 1

In your media query, set a width on the select element. This will cause the select box to be the correct width, but any text longer than the box will be cut off.

@media only screen and (max-width: 760px), (min-width: 768px) and (max-width: 1024px) {
    /* ... */
    select {
        width: 150px;
    }
}

JSFiddle

EDIT: Applying word-wrap: break-word; to the select element allows the select option to not be cut off and to wrap to the next line, although you'll have to be careful about the length of each line because break-word can break within the word.

New JSFiddle

Solution 2

A select box will only shrink as small as the longest select-able piece of text. Since one of you selection options is "What Was Your Best Friend's Name When You Were A Child?" it will never shrink smaller then that line. Even if that line isnt selected.

In your media query you could change the text size to shrink those long selections down so they are at least slightly smaller.

Comments

[BReal14]

This would cut the text of the option, though. If all start with similar text like "What are..." you may never actually see the correct option.

[gbade_]

Thanks guys. I used quantumwannabe's idea, but rather than fix the width, i gave it a width of 100%.

[AntonChanning]

Why ignore screens with a width between 761px and 767px?

[quw]

I just used the OP's media query.