web-dev-qa-db-fra.com

Comment styliser une entrée et un bouton de soumission avec CSS?

J'apprends le CSS. Comment styliser une entrée et un bouton de soumission avec CSS?

J'essaie de créer quelque chose comme ça mais je ne sais pas comment faire

<form action="#" method="post">
    Name <input type="text" placeholder="First name"/>
    <input type="text" placeholder="Last name"/>
    Email <input type="text"/>
    Message <input type="textarea"/>
    <input type="submit" value="Send"/>
</form>

enter image description here

htmlcss
124
user2307683

http://jsfiddle.net/vfUvZ/

Voici un point de départ

CSS:

input[type=text] {
    padding:5px; 
    border:2px solid #ccc; 
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

input[type=text]:focus {
    border-color:#333;
}

input[type=submit] {
    padding:5px 15px; 
    background:#ccc; 
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
}
193
Nick R

Appelez simplement votre bouton Soumettre comme vous le feriez avec n'importe quel autre élément HTML. vous pouvez cibler différents types d'éléments d'entrée à l'aide du sélecteur d'attribut CSS

À titre d'exemple, vous pouvez écrire 

input[type=text] {
   /*your styles here.....*/
}
input[type=submit] {
   /*your styles here.....*/
}
textarea{
   /*your styles here.....*/
}

Combiner avec d'autres sélecteurs

input[type=text]:hover {
   /*your styles here.....*/
}
input[type=submit] > p {
   /*your styles here.....*/
}
....

Voici un travail Exemple

60
Monkey D Luffy

HTML

<input type="submit" name="submit" value="Send" id="submit" />

CSS

#submit {
 color: #fff;
 font-size: 0;
 width: 135px;
 height: 60px;
 border: none;
 margin: 0;
 padding: 0;
 background: #0c0 url(image) 0 0 no-repeat; 
}
22
Jayram Singh

Je suggère au lieu d'utiliser

<input type='submit'>

utilisation 

<button type='submit'>

Button a été introduit en tenant particulièrement compte du style CSS. Vous pouvez maintenant y ajouter l’image d’arrière-plan du dégradé ou la styliser à l’aide de dégradés CSS3. 

En savoir plus sur la structure des formulaires HTML5 ici

http://www.w3.org/TR/2011/WD-html5-20110525/forms.html

Salut! . Pav

12
Pav

l’interface utilisateur des éléments de formulaire est quelque peu contrôlée par le navigateur et le système d’exploitation. Il n’est donc pas trivial de les attribuer à un style très fiable, de manière à ce qu’ils aient la même apparence dans toutes les combinaisons navigateur/système d’exploitation courantes.

Au lieu de cela, si vous voulez quelque chose de spécifique, je recommanderais d'utiliser une bibliothèque qui vous fournit des éléments de formulaire stylables. uniform.js est l'une de ces bibliothèques.

4
eis

Pour des raisons de fiabilité, je suggérerais de donner des noms de classe, ou des variables ids aux styles (idéalement une class pour les entrées de texte, car il y en aura probablement plusieurs) et une id au bouton de soumission (bien qu'une class fonctionne également ):

<form action="#" method="post">
    <label for="text1">Text 1</label>
    <input type="text" class="textInput" id="text1" />
    <label for="text2">Text 2</label>
    <input type="text" class="textInput" id="text2" />
    <input id="submitBtn" type="submit" />
</form>

Avec le CSS:

.textInput {
    /* styles the text input elements with this class */
}

#submitBtn {
    /* styles the submit button */
}

Pour les navigateurs plus récents, vous pouvez sélectionner par attributs (en utilisant le même code HTML):

.input {
    /* styles all input elements */
}

.input[type="text"] {
     /* styles all inputs with type 'text' */
}

.input[type="submit"] {
     /* styles all inputs with type 'submit' */
}

Vous pouvez aussi simplement utiliser des combinateurs frères (puisque les entrées de texte à styler semblent toujours suivre un élément label, et que submit suit une zone de texte (mais celle-ci est plutôt fragile)):

label + input,
label + textarea {
    /* styles input, and textarea, elements that follow a label */
}

input + input,
textarea + input {
    /* would style the submit-button in the above HTML */
}
4
David Thomas

Lorsque vous modifiez un type d'entrée, utilisez le code suivant.

   input[type=submit] {
    background-color: pink; //Example stlying
    }
1
JacobG182

En fait, cela fonctionne aussi très bien.

input[type=submit]{
                 width: 15px;
                 position: absolute;
                 right: 20px;
                 bottom: 20px;
                 background: #09c;
                 color: #fff;
                 font-family: tahoma,geneva,algerian;
                 height: 30px;
                 -webkit-border-radius: 15px;
                 -moz-border-radius: 15px;
                 border-radius: 15px;
                 border: 1px solid #999;
             }
1
Mpairwe Humphrey

Je l’ai fait de cette façon en fonction des réponses données ici, j’espère que cela aidera

.likeLink {
    background: none !important;
    color: #3387c4;
    border: none;
    padding: 0 !important;
    font: inherit;
    cursor: pointer;
}
    .likeLink:hover {
        background: none !important;
        color: #25618c;
        border: none;
        padding: 0 !important;
        font: inherit;
        cursor: pointer;
        text-decoration: underline;
    }
1
Danilo Venegas

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3 Button</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<a href="#" class="btn">Push</a>
</div>
</body>
</html>

Style CSS

a.btn {
display: block; width: 250px; height: 60px; padding: 40px 0 0 0; margin: 0 auto;

background: #398525; /* old browsers */
background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */

box-shadow: inset 0px 0px 6px #fff;
-webkit-box-shadow: inset 0px 0px 6px #fff;
border: 1px solid #5ea617;
border-radius: 10px;
}
0
karthi

Très simple: 

<html>
<head>
<head>
<style type="text/css">
.buttonstyle 
{ 
background: black; 
background-position: 0px -401px; 
border: solid 1px #000000; 
color: #ffffff;
height: 21px;
margin-top: -1px;
padding-bottom: 2px;
}
.buttonstyle:hover {background: white;background-position: 0px -501px;color: #000000; }
</style>
</head>
<body>
<form>
<input class="buttonstyle" type="submit" name="submit" Value="Add Items"/>
</form>
</body>
</html>

Cela fonctionne, j'ai testé.

0
Saikat Chakraborty