कैसे पर textarea की सीमा रंग बदलने के लिए: फोकस

Question

मुझे माफ कर दो यह एक बेवकूफ सवाल है, लेकिन मुझे मदद की ज़रूरत है। मैं फोकस पर सीमा का रंग बदलना चाहता हूं। लेकिन मेरा कोड ठीक से काम नहीं कर रहा है।

फिडल पर कोड देखें ।

<form name = "myform" method = "post" action="insert.php"  onsubmit="return validateform()" style="width:40%">
        <input type="text" placeholder="Enter Name." name="name" maxlength="300" class="input">
        <input type="email" placeholder="Enter E-mail." name="address" maxlength="300" class="input">
        <textarea placeholder="Enter Message." name="descrip" class="input" ></textarea>    
<br>
<input class="button secondary" type=submit name="submit" value="Submit" >
</form>

यहाँ सीएसएस है

.input {
border:0; 
padding:10px; 
font-size:1.3em; 
font-family:"Ubuntu Light","Ubuntu","Ubuntu Mono","Segoe Print","Segoe UI";
color:#ccc; 
border:solid 1px #ccc; 
margin:0 0 20px; 
width:300px;
-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2); 
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2); 
box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 3px; 
-moz-border-radius: 3px; 
border-radius: 3px;

}
input:focus { 
    outline: none !important;
    border-color: #719ECE;
    box-shadow: 0 0 10px #719ECE;
}

Comments

सीमा के लिए आपने जिस रंग को चुना है, वह डिफ़ॉल्ट रंग जैसा दिखता है ....

— 23

Answer 1

.input:focus {
    outline: none !important;
    border:1px solid red;
    box-shadow: 0 0 10px #719ECE;
}

Comments

आप इनपुट को भी बदल सकते हैं: .input पर ध्यान दें: ध्यान केंद्रित करें क्योंकि आप पहले से ही textarea पर उस वर्ग का उपयोग कर रहे हैं। आप इस तरह से अतिरिक्त चयनकर्ता से छुटकारा पा लेते हैं।

— होश्ट्स

बस जिज्ञासु, खरीदें क्यों textareas की जरूरत है outline: noneलेकिन सामान्य textbox जानकारी नहीं है?

— जस्टिन स्काइल्स

मुझे लगता है कि बेहतर आउटलाइन और छाया का एक साथ उपयोग करना "रूपरेखा: ठोस 2px # 8dc63f; बॉक्स-छाया: 0 0 21px # 8dc63f;" :-)

— बीजी ब्रूनो

यह फ़िडेल लिंक मौजूद नहीं है।

— अर्पण जैन

Answer 2

एक इनपुट है: ध्यान केंद्रित करें क्योंकि एक टेक्स्टारिया है: फोकस

input:focus { 
    outline: none !important;
    border-color: #719ECE;
    box-shadow: 0 0 10px #719ECE;
}
textarea:focus { 
    outline: none !important;
    border-color: #719ECE;
    box-shadow: 0 0 10px #719ECE;
}

Comments

दोनों नियमों को निम्नानुसार जोड़ा जा सकता है - input:focus, textarea:focus { outline: none !important; border-color: #719ECE; box-shadow: 0 0 10px #719ECE; }यदि आप दोनों प्रकार के तत्वों पर एक ही प्रभाव चाहते हैं।

— हितेश

Answer 3

संभवतः सीएसएस नियम का उपयोग करके रूपरेखा के रंग को बदलने का एक अधिक उपयुक्त तरीका है outline-color।

textarea {
  outline-color: #719ECE;
}

या इनपुट के लिए

input {
  outline-color: #719ECE;
}

box-shadow यह एक ही बात नहीं है और यह रूपरेखा से अलग दिख सकता है, खासकर यदि आप अपने तत्व के लिए कस्टम स्टाइल लागू करते हैं।

Comments

हाँ, लेकिन एक आयत की रूपरेखा नहीं है? अच्छा नहीं अगर आप बॉर्डर-रेडियस वाले बटन / इनपुट को स्टाइल कर रहे हैं।

— जोसेफ क्रेफ़ेल्स II

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

— वर्कआर्ड

Answer 4

बहुत आसन :

 outline-color : blue !important;

मेरी प्रतिक्रिया-वृद्धि बटन के लिए संपूर्ण CSS है:

.custom-btn {
    font-size:1.9em;
    background: #2f5bff;
    border: 2px solid #78e4ff;
    border-radius: 3px;
    padding: 50px 70px;
    outline-color : blue !important;
    text-transform: uppercase;
    user-select: auto;
    -moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
    -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

Answer 5

आपको बस scss वेरिबल की जरूरत है

$input-btn-focus-width:       .05rem !default;