बदलते यह ऊंचाई

Question

है चलो कहते हैं कि मैं किसी भी सीएसएस

<input type="text" /> 

मैं इसे लाल करने के लिए सीमा रंग है बदलना चाहते हैं के बिना एक डिफ़ॉल्ट पाठ इनपुट करते हैं बिना इनपुट पाठ सीमा रंग बदलें ताकि मैं एक शैली को जोड़ने

<input type="text" style="border-color:red" /> 

उसके बाद सीमा लाल है लेकिन इसका आकार 2px है। यदि मैं सीमा को 1px तक बदलता हूं तो इनपुट की ऊंचाई डिफ़ॉल्ट से छोटी होगी।

मैं अपनी सीमा को 1px में कैसे बदल सकता हूं और आश्वस्त करता हूं कि इनपुट की वास्तविक ऊंचाई (सीमा सहित) डिफ़ॉल्ट के समान है?

Answer 1

इस

<input type="text"/> 

यह मोज़िला, क्रोम और इंटरनेट एक्सप्लोरर की तरह सभी पार ब्राउज़र में एक ही प्रदर्शित करेगा की कोशिश करो।

<style> 
    input{ 
     border:2px solid #FF0000; 
    } 
</style> 

न क्योंकि आपके इनपुट बॉक्स के लिए शैली को जोड़ने के लिए अपनी नहीं अच्छा अभ्यास, उपयोग वर्ग शैली इनलाइन जोड़ें।

Answer 2

इस उपयोग करते हैं, यह प्रभाव नहीं होगा ऊंचाई:

<input type="text" style="border:1px solid #ff0000" /> 

Answer 3

एक पारदर्शी बॉर्डर सेट करें और फिर इसे बदलने के लिए:

.default{ 
border: 2px solid transparent; 
} 

.new{ 
border: 2px solid red; 
} 

Answer 4

यह सीएसएस समाधान मेरे लिए काम किया:

input:active, 
input:focus { 
    border: 1px solid #red 
} 

input:active, 
input:focus { 
    padding: 2px solid #red /*for firefox and chrome*/ 
} 

/* .ie is a class you would need to set at the html root level */ 
.ie input:active, 
.ie input:focus { 
    padding: 3px solid #red /* IE needs 1px extra padding*/ 
} 

मुझे समझ में आता है कि यह एफएफ और क्रोम पर आवश्यक नहीं है, लेकिन आईई को इसकी आवश्यकता है। और हालात हैं जब आपको इसकी आवश्यकता होती है।

Answer 5

क्या आप यह देख रहे हैं।

$("input.address_field").on('click', function(){ 
    $(this).css('border', '2px solid red'); 
});