L'obtention de balise Select pour être réactif

Je suis actuellement à la rédaction d'un réactif de page à l'aide de HTML5 et CSS3, et dans mon code HTML, j'ai un formulaire. Le formulaire contient une table qui est sensible et s'effondre comme la page se rétrécit. Le seul problème que j'ai est la balise select ne s'effondre pas avec d'autres éléments de formulaire. Voici mon code HTML et 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>

Le 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; 
    }
}

tandis que les zones de texte s'effondre, la balise select qui ne fonctionne pas. S'il vous plaît, comment puis-je résoudre ce problème?

Cela peut vous aider css-tricks.com/convert-menu-to-dropdown

OriginalL'auteur gbade_ | 2014-08-22

  1. 6

    Dans votre requête des médias, de définir un width sur l'élément select. Ce sera la cause de la zone de sélection pour être à la bonne largeur, mais n'importe quel texte plus long que la zone à couper.

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

    JSFiddle

    EDIT: l'Application de word-wrap: break-word; à l'élément select permet de sélectionner une option pour ne pas être coupée et à un retour à la ligne, bien que vous aurez à faire attention à la longueur de chaque ligne parce que break-word peut briser de l'intérieur de la parole.

    Nouveau JSFiddle

    Ce serait couper le texte de l'option, si. Si tous commencer avec un texte similaire comme "Ce sont..." vous ne pouvez jamais réellement voir l'option correcte.
    Pourquoi ignorer les écrans avec une largeur entre 761px et 767px?
    J'ai simplement utilisé l'OP de media query.

    OriginalL'auteur quantumwannabe

  2. 1

    Une boîte de sélection ne se rétrécir aussi petite que la plus longue sélectionnez-mesure morceau de texte. Depuis l'un de vous les options de sélection est "Quel a Été Votre Meilleur Ami du Nom Lorsque Vous Étiez Enfant?" il ne sera jamais à se rétrécir de plus petites alors que ligne. Même si cette ligne n'est pas sélectionnée.

    Dans votre requête de média vous pouvez changer la taille du texte pour réduire ces longues sélections vers le bas de sorte qu'ils sont au moins légèrement plus petit.

    Merci les gars. J'ai utilisé quantumwannabe de l'idée, mais plutôt que de fixer la largeur, je lui ai donné une largeur de 100%.

    OriginalL'auteur GifCo