Bagaimana gaya input dan submit dengan CSS?

I'm belajar CSS. Bagaimana gaya input dan submit dengan CSS?

I'm mencoba membuat sesuatu seperti ini, tapi aku tidak tahu bagaimana melakukan

<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>

Pemrograman
html css
11 Juni 2013 в 10:44
65 tayangan
Mengomentari pertanyaan (4)

[http://jsfiddle.net/vfUvZ/][1]

Berikut ini's titik awal

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; 
}
Dave
Jawaban edit 9 November 2015 в 1:21
Komentar (0)

Hanya gaya anda Submit seperti anda akan gaya lainnya elemen html. anda dapat menargetkan berbagai jenis elemen input dengan menggunakan CSS atribut selector

Sebagai contoh, anda bisa menulis 

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

Menggabungkan dengan lain penyeleksi

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

Berikut ini adalah kerja [Contoh][1]

Monkey D Luffy
Jawaban edit 7 Agustus 2018 в 6:05
Komentar (0)

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; 
}
Komentar (0)

Saya akan menyarankan daripada menggunakan

<input type=&#39;submit&#39;>

gunakan

<button type=&#39;submit&#39;>

Tombol diperkenalkan secara khusus bantalan styling CSS dalam pikiran. Anda sekarang dapat menambahkan gradien gambar latar belakang untuk itu atau gaya ini menggunakan CSS3 gradien.

Baca lebih lanjut tentang HTML5 bentuk struktur di sini

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

Cheers! .Pav

Komentar (2)

bentuk elemen UI agak dikendalikan oleh browser dan sistem operasi, sehingga tidak sepele untuk gaya mereka sangat andal dalam cara bahwa itu akan terlihat sama di semua browser umum/OS kombinasi.

Sebaliknya, jika anda ingin sesuatu yang spesifik, saya akan merekomendasikan untuk menggunakan perpustakaan yang menyediakan anda stylable elemen form. uniform.js adalah salah satu perpustakaan.

eis
Jawaban edit 17 September 2017 в 7:42
Komentar (2)

Untuk keandalan I'd sarankan memberikan kelas-nama, atau id pada elemen gaya (idealnya sebuahkelasuntuk teks input, karena tidak akan mungkin ada beberapa) daniduntuk tombol kirim (meskipunkelas` akan bekerja dengan baik):


    Text 1
    <input type="text" class="textInput" id="text1" />
    Text 2
    <input type="text" class="textInput" id="text2" />
    <input id="submitBtn" type="submit" />

Dengan CSS:

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

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

Untuk lebih up-to-date browser, anda dapat memilih dengan atribut (menggunakan HTML yang sama):

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

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

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

Anda bisa juga hanya menggunakan saudara combinators (karena teks-masukan untuk gaya tampaknya selalu mengikuti sebuah label elemen, dan menyerahkan berikut textarea (tapi ini agak rapuh)):

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 */
}
Komentar (0)

Aku melakukannya dengan cara ini didasarkan pada jawaban yang diberikan di sini, saya berharap hal ini membantu

.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;
    }
Komentar (0)

Ketika styling input type submit menggunakan kode berikut.

   input[type=submit] {
    background-color: pink; //Example stlying
    }
Komentar (0)

Sebenarnya, ini juga karya besar.

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;
             }
Sushil Sharma
Jawaban edit 20 Oktober 2015 в 12:54
Komentar (1)

HTML




<meta charset="utf-8" />
CSS3 Button



<div id="container">
<a href="#" class="btn">Push</a>
</div>

Styling 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;
}
Komentar (1)

Sangat sederhana: 





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




<input class="buttonstyle" type="submit" name="submit" Value="Add Items"/>

Ini adalah kerja saya telah diuji.

Komentar (0)