À l'aide de CSS pour faire pivoter une entrée de valeur de 90 degrés

J'ai un bouton de soumission dont le texte doit être tourné. Cependant, je ne peux sembler à travailler sur la façon de faire pivoter l'ensemble de bouton soumettre plutôt que de simplement le VALUE.

Le CSS que j'utilise pour faire pivoter est tout simplement:

-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg);

et l'ensemble de la CSS pour le bouton envoyer est:

.form input[value="SUBMIT"] {
    height:1.5em;
    width:7em;
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    font-size:1.5em;
}

Comme vous pouvez le deviner, cela s'applique à l'ensemble de bouton soumettre, donc, le tout est tourné (c'est pourquoi j'ai troqué la hauteur/largeur attributs pour en faire une fine barre verticale, voir image ci-dessous).

Le Problème est que cela fait de la position du bouton vraiment étrange, et je n'arrive pas à la position souhaitée dans la div (qui est directement à droite de la textarea). Il n'y a plus beaucoup de place, cependant l'ajout de margin-top:-XYZem seulement pousse le bouton un peu, puis s'arrête.

Voici une version live de sorte que vous obtenez l'idée

Le bouton est très facile de position quand je n'ai pas fait la rotation; est-il possible de faire tourner UNIQUEMENT la valeur du texte qui se trouve sur le bouton, et non pas l'intégralité du bouton lui-même?

InformationsquelleAutor JVG | 2012-01-17
  1. 7

    mettre d'entrée dans la div et de personnaliser votre style

    code html:

    <div class="button">
    <input type="submit" value="submit" />
</div>

    de style css:

    .button{
/* write your style here*/
    background-color: #12E9F0;
    border: medium none;
    margin-right: 0;
    padding: 0.2em 0.6em;
}
.button input[type="submit"]{
    height:1.5em;
    width:7em;
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    font-size:1.5em;
    border:0 none;
    background:none;
}
    • Correct, avec un léger supplément, il est beaucoup plus facile d'utiliser le .button div pour positionner le bouton et de mettre de la couleur d'arrière-plan/remplissage/etc tous sur l'entrée elle-même. Cheers mate!
    InformationsquelleAutor Abudayah
  2. 1

    Je pense que c'est ce que u besoin :

    .form input[value="SUBMIT"] {
    -moz-transform: rotate(-90deg);
    font-size: 1.5em;
    height: 1.5em;
    position: absolute;
    top: 3.5em;
    width: 7em;
}
    InformationsquelleAutor Kannika