CSS के साथ इनपुट और सबमिट बटन कैसे स्टाइल करें?

Question

मैं CSS सीख रहा हूँ। CSS के साथ इनपुट और सबमिट बटन कैसे स्टाइल करें?

मैं ऐसा कुछ बनाने की कोशिश कर रहा हूं, लेकिन मुझे नहीं पता कि कैसे करना है

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

Comments

आप इसे स्टाइल कर सकते हैं जैसे आप किसी अन्य तत्व को स्टाइल करेंगे

— विस्फोट पिल्स

stackoverflow.com/questions/3540380/…

— gaynorvader

ध्यान देने वाली महत्वपूर्ण बात, आप इसे किसी अन्य तत्व की तरह स्टाइल नहीं कर सकते । <input>टैग जैसी चीजों का समर्थन नहीं करते ::after।

— जमुअल्लुफर

सही बात। इसलिए मुझे लगता है कि यह उपयोग करने के लिए बेहतर है <button type="submit"><span>Send</span></button>। फिर आप -tag ::afterपर उपयोग कर सकते हैं span।

— कुंबी

Answer 1

http://jsfiddle.net/vfUvZ/

यहाँ एक प्रारंभिक बिंदु है

सीएसएस:

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

Answer 2

बस अपने Submit बटन को स्टाइल करें जैसे आप किसी अन्य html एलिमेंट को स्टाइल करेंगे। आप CSS विशेषता चयनकर्ता का उपयोग करके विभिन्न प्रकार के इनपुट तत्वों को लक्षित कर सकते हैं

एक उदाहरण के रूप में आप लिख सकते हैं

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

अन्य चयनकर्ताओं के साथ गठबंधन करें

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

यहाँ एक काम कर उदाहरण है

Answer 3

एचटीएमएल

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

सीएसएस

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

Answer 4

मैं उपयोग करने के बजाय सुझाव देना चाहूंगा

<input type='submit'>

उपयोग

<button type='submit'>

बटन को खासतौर पर CSS स्टाइल को ध्यान में रखते हुए पेश किया गया था। अब आप इसमें ग्रेडिएंट बैकग्राउंड इमेज जोड़ सकते हैं या CSS3 ग्रेडिएंट्स का उपयोग करके इसे स्टाइल कर सकते हैं।

HTML5 फॉर्म संरचना पर अधिक पढ़ें

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

चीयर्स! .Pav

Comments

यह बहुत मददगार था, क्योंकि आईओएस के लिए सफारी मेरी शैली को सही ढंग से बटन पर लागू करती है, लेकिन <इनपुट प्रकार = "सबमिट"> :) पर नहीं

— क्रशडिपिक्सल

लेकिन तब आप बटन पर पाठ के रूप में मान निर्दिष्ट नहीं कर सकते, बल्कि बटन टैग के बीच पाठ <बटन> पाठ </ बटन>

— Uzebeckatrente

Answer 5

विश्वसनीयता के लिए मैं कक्षा-नाम देना चाहूंगा, या idतत्वों को शैली के लिए (आदर्श रूप classसे पाठ-इनपुट के लिए, क्योंकि संभवतः कई होंगे) और idसबमिट बटन (हालांकि यह classभी काम करेगा):

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

सीएसएस के साथ:

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

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

अधिक अद्यतित ब्राउज़रों के लिए, आप विशेषताओं (उसी HTML का उपयोग करके) का चयन कर सकते हैं:

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

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

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

आप सिबलिंग कॉम्बीनेटर का उपयोग भी कर सकते हैं (क्योंकि पाठ-इनपुट शैली में हमेशा अनुसरण करते हैं label तत्व है, और सबमिट एक टेक्स्टरी का अनुसरण करती है (लेकिन यह नाजुक है)):

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 */
}

Answer 6

फार्म एलिमेंट यूआई कुछ हद तक ब्राउज़र और ऑपरेटिंग सिस्टम द्वारा नियंत्रित किया जाता है, इसलिए यह बहुत विश्वसनीय तरीके से उन्हें स्टाइल करने के लिए तुच्छ नहीं है कि यह सभी सामान्य ब्राउज़र / ओएस संयोजनों में समान दिखाई देगा।

इसके बजाय, यदि आप कुछ विशिष्ट चाहते हैं, तो मैं आपको एक पुस्तकालय का उपयोग करने की सलाह दूंगा जो आपको शैलीगत तत्व प्रदान करता है। uniform.js ऐसे ही एक पुस्तकालय है।

Comments

@BalinKingOfMoria ऐसा लगता है कि हाँ। मैंने लिंक अपडेट किया।

— eis

Answer 7

इनपुट प्रकार सबमिट करते समय निम्नलिखित कोड का उपयोग करें।

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

Answer 8

वास्तव में, यह भी बहुत अच्छा काम करता है।

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

Comments

यह पूरी तरह से भयानक है

— रेटबर्ट

Answer 9

मैंने इसे यहाँ दिए गए उत्तरों के आधार पर किया, मुझे आशा है कि इससे मदद मिलेगी

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

Answer 10

एचटीएमएल

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

सीएसएस स्टाइल

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

Comments

इसे सबमिट इनपुट की तरह कैसे उपयोग करें?

— user2307683

Answer 11

बहुत आसान:

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

यह काम कर रहा है जो मैंने परीक्षण किया है।