CSS / HTML: एक इनपुट फ़ील्ड के चारों ओर एक चमकदार बॉर्डर बनाएं

Question

मैं अपने फॉर्म के लिए कुछ अच्छे इनपुट बनाना चाहता हूं, और मैं वास्तव में यह जानना चाहूंगा कि TWITTER अपने इनपुट के आसपास अपनी चमकती सीमा को कैसे दर्शाता है।

उदाहरण / ट्विटर बॉर्डर की तस्वीर:

मैं यह भी नहीं जानता कि गोल कोनों को कैसे बनाया जाए।

Comments

यहाँ एक ट्यूटोरियल है जो आपको सिखाता है कि: CSS ग्लो बॉक्स-शैडो के साथ प्रभाव

— Town

@ शहर का लिंक खराब प्रतीत होता है: पुनर्निर्देशित लूप।

— जेरोल्डास

Answer 1

हेयर यू गो:

.glowing-border {
    border: 2px solid #dadada;
    border-radius: 7px;
}

.glowing-border:focus { 
    outline: none;
    border-color: #9ecaed;
    box-shadow: 0 0 10px #9ecaed;
}

लाइव डेमो: http://jsfiddle.net/simevidas/CXUpm/1/show/

(डेमो के लिए कोड देखने के लिए, URL से "शो /" निकालें)

label { 
    display:block;
    margin:20px;
    width:420px;
    overflow:auto;
    font-family:sans-serif;
    font-size:20px;
    color:#444;
    text-shadow:0 0 2px #ddd;
    padding:20px 10px 10px 0;
}

input {
    float:right;
    width:200px;
    border:2px solid #dadada;
    border-radius:7px;
    font-size:20px;
    padding:5px;
    margin-top:-10px;    
}

input:focus { 
    outline:none;
    border-color:#9ecaed;
    box-shadow:0 0 10px #9ecaed;
}

<label> Aktuelles Passwort: <input type="password"> </label>
<label> Neues Passwort: <input type="password"> </label>

Comments

मैं चमक को कैसे चेतन कर सकता हूं?

— एल्विस

@NSElvis जैसे transition: box-shadow linear 1s jsfiddle.net/simevidas/6LyWe/1

— Vidime Vidas

बहुत अच्छा। एक बात, यदि आप केवल पाठ इनपुट फ़ील्ड पर इसे लागू करना चाहते हैं, तो आप चयनकर्ता को प्रतिबंधित करना चाहेंगे: इनपुट [टाइप = टेक्स्ट]: फोकस, इनपुट [टाइप = पासवर्ड], इनपुट [टाइप = टेक्स्टारिया]।

— माइकल केनेडी

@MichaelKennedy वास्तविक दुनिया के अनुप्रयोगों में, यह पर्याप्त नहीं होगा। मानक दृष्टिकोण कक्षाएं, उदाहरण के लिए होगा .glowing-input { … }।

— 05इमे विदेस

निश्चित रूप से, मेरा कहना यह था कि रेडियो बटन, सबमिट बटन इत्यादि के लिए आवेदन किया गया था, जो नहीं चाहते थे।

— माइकल केनेडी

Answer 2

कैसे इस तरह के बारे में कुछ ... http://jsfiddle.net/UnsungHero97/Qwpq4/1207/

सीएसएस

input {
    border: 1px solid #4195fc; /* some kind of blue border */

    /* other CSS styles */

    /* round the corners */
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;


    /* make it glow! */
    -webkit-box-shadow: 0px 0px 4px #4195fc;
       -moz-box-shadow: 0px 0px 4px #4195fc;
            box-shadow: 0px 0px 4px #4195fc; /* some variation of blue for the shadow */

}

Comments

यह अंदर और बाहर कम नहीं है

— rubo77

तो क्या? स्वीकृत उत्तर आसानी से अंदर-बाहर नहीं करता है। मूल प्रश्न (और मेरे उत्तर) को 2011 में पोस्ट किया गया था, और मुझे पूरा यकीन है कि ट्विटर की चमक सीमाएँ या तो बाहर और भीतर आसान नहीं थीं। इसके अलावा, सवाल सहजता से बाहर पर ध्यान केंद्रित नहीं करता है, बल्कि यह कि गोल कोनों के साथ सीमा को कैसे चमकाया जाए, जिसका मैंने जवाब दिया है। मुझे नहीं लगता कि आपको सिर्फ इसलिए मुझे नीचा दिखाना चाहिए क्योंकि इसमें कोई आसानी नहीं है

— हिस्टोरो

Answer 3

स्थिति के साथ एक सामान्य नीला border, एक माध्यम border-radiusऔर एक नीला का उपयोग करें ।box-shadow0 0

Answer 4

SLaks ने सिर पर कील ठोकी लेकिन आप CSS3 के इनपुट के बदलावों को सामान्य तौर पर देखना चाहते हैं। गोल कोनों और बॉक्स-छाया सीएसएस 3 में दोनों नई विशेषताएं हैं और आपको ठीक वही करने देंगे जो आप देख रहे हैं। CSS3 / HTML5 के लिए मेरा व्यक्तिगत पसंदीदा लिंक http://diveintohtml5.ep.io/ है ।

Answer 5

मैंने पिछले उत्तरों ( jsfiddle ) में से दो को संयुक्त किया ।

input {
    /* round the corners */
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;    
}

input:focus { 
    outline:none;
    border: 1px solid #4195fc; 
    /* create a BIG glow */
    box-shadow: 0px 0px 14px #4195fc; 
    -moz-box-shadow: 0px 0px 14px #4195fc;
    -webkit-box-shadow: 0px 0px 14px #4195fc;  
}​

Answer 6

थोड़ा कम चमक संस्करण के साथ संशोधित संस्करण।

input {
    /* round the corners */
    //background-color: transparent;
    border: 1px solid;
    height: 20px;
    width: 160px;
    color: #CCC;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;    
}

input:focus { 
    outline:none;
    border: 1px solid #4195fc; 
    /* create a BIG glow */
    box-shadow: 0px 0px 5px #4195fc; 
    -moz-box-shadow: 0px 0px 5px #4195fc;
    -webkit-box-shadow: 0px 0px 5px #4195fc;  
}

Answer 7

input[type="text"]{
   @include transition(all 0.30s ease-in-out);
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}
input[type="text"]:focus{
  @include box-shadow(0 0 5px rgba(81, 203, 238, 1));
  -webkit-box-shadow: 0px 0px 5px #007eff;  
  -moz-box-shadow: 0px 0px 5px #007eff;  
  box-shadow: 0px 0px 5px #007eff;
}

Answer 8

नीचे वह कोड है जो बूटस्ट्रैप उपयोग करता है। रंग थोड़े अलग हैं लेकिन अवधारणा समान है। यदि आप CSS को संकलित करने के लिए LESS का उपयोग कर रहे हैं तो यह है:

// Form control focus state
//
// Generate a customized focus state and for any input with the specified color,
// which defaults to the `@input-focus-border` variable.
//
// We highly encourage you to not customize the default value, but instead use
// this to tweak colors on an as-needed basis. This aesthetic change is based on
// WebKit's default styles, but applicable to a wider range of browsers. Its
// usability and accessibility should be taken into account with any change.
//
// Example usage: change the default blue border and shadow to white for better
// contrast against a dark gray background.

.form-control-focus(@color: @input-border-focus) {
  @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
  &:focus {
    border-color: @color;
    outline: 0;
    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
  }
}

यदि आप LESS का उपयोग नहीं कर रहे हैं तो यहाँ संकलित संस्करण है:

.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

Answer 9

इससे चमक वाले इनपुट फ़ील्ड और टेक्स्टारेज़ बनेंगे:

textarea,textarea:focus,input,input:focus{
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    border: 1px solid #c4c4c4;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 0px 0px 8px #d9d9d9;
    -moz-box-shadow: 0px 0px 8px #d9d9d9;
    -webkit-box-shadow: 0px 0px 8px #d9d9d9;
}

input:focus,textarea:focus { 
    outline: none;
    border: 1px solid #7bc1f7;
    box-shadow: 0px 0px 8px #7bc1f7;
    -moz-box-shadow: 0px 0px 8px #7bc1f7;
    -webkit-box-shadow: 0px 0px 8px #7bc1f7;
}

Answer 10

$('.form-fild input,.form-fild textarea').focus(function() {
    $(this).parent().addClass('open');
});

$('.form-fild input,.form-fild textarea').blur(function() {
    $(this).parent().removeClass('open');
});

.open {
  color:red;   
}
.form-fild {
	position: relative;
	margin: 30px 0;
}
.form-fild label {
	position: absolute;
	top: 5px;
	left: 10px;
	padding:5px;
}

.form-fild.open label {
	top: -25px;
	left: 10px;
	/*background: #ffffff;*/
}
.form-fild input[type="text"] {
	padding-left: 80px;
}
.form-fild textarea {
	padding-left: 80px;
}
.form-fild.open textarea, 
.form-fild.open input[type="text"] {
	padding-left: 10px;
}
textarea,
input[type="text"] {
	padding: 10px;
	width: 100%;
}
textarea,
input,
.form-fild.open label,
.form-fild label {
	-webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
	<div class="row">
    	<form>
        <div class="form-fild">
            <label>Name :</label>
            <input type="text">
        </div>
        <div class="form-fild">
            <label>Email :</label>
            <input type="text">
        </div>
        <div class="form-fild">
            <label>Number :</label>
            <input type="text">
        </div>
        <div class="form-fild">
            <label>Message :</label>
            <textarea cols="10" rows="5"></textarea>
        </div>
    </form>
    </div>
</div>

Answer 11

आप ट्विटर बूटस्ट्रैप का बेहतर उपयोग करते हैं, जिसमें यह अच्छी सामग्री है। विशेष रूप से यहाँ वही है जो आप चाहते हैं।

इसके अलावा, आप इस वेबसाइट से Twitter बूटस्ट्रैप के लिए निर्मित विभिन्न थीम का उपयोग कर सकते हैं

Comments

बूटस्ट्रैप रूपों के लिए निश्चित टूटी हुई कड़ी

— राफियां