Getting the Select tag to respond

Question

I am currently writing a responsive page using HTML5 and CSS3, and in my HTML, I have a form. The form contains a table that responds and collapses when the page is compressed. The only problem I encountered is the select tag, which does not compress 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 Middle Name?</option> <option value="#">In What Town Did You Spend Most Of Your Youth?</option> <option value="#">What Was Your Best Friend Name When You Were A Child?</option> <option value="#">What Was Your Favorite Childhood Pet 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> 

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 text fields are collapsed, the select tag does not work. Please how to solve this?

Answer 1

In the request to the library, set the width in the select element. This will cause the selection box to have the correct width, but the text will be longer than the box will be disabled.

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

Jsfiddle

EDIT: Using word-wrap: break-word; to the selection element allows you to disable the selection option and wrap it on the next line, although you need to be careful about the length of each because the break-word may break inside the word.

New JSFiddle

Answer 2

The selection box will be reduced only to the longest selection of text. Because one of your choices is "What was your best friend when you were a kid?" it will never decrease than this line. Even if this line is not selected.

In a media query, you can resize text to reduce these long selections so that they are at least slightly smaller.