3px सीमा वाले इनपुट फ़ील्ड पर फ़ोकस करते समय, अन्य सभी इनपुट फ़ील्ड

Question

स्थानांतरित करते रहते हैं I इनपुट क्षेत्र पर एक सीएसएस फोकस जोड़ा। जिसमें एक डिफ़ॉल्ट शैली है जिसमें सीमा और छाया शामिल है। जब मैं इनपुट फ़ील्ड पर ध्यान केंद्रित करता हूं, तो नीचे इनपुट फ़ील्ड थोड़ा नीचे चला जाता है। मैंने ली को ऊंचाई जोड़ने की कोशिश की लेकिन यह काम नहीं किया।

/* CSS 


    input[type="text"], 
    input[type="password"] { 

    border: 1px solid #CCCCCC; 
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.2); 
    min-height: 22px; 
padding: 3px; 

    } 

.checkout input:focus { 
border:3px solid #6b991c; 
padding:2px; 
} 

*/ 

<ul class="clearFix"> 
        <li>      
         <label for="title" class="checkoutLabel">Title <strong class="requiredInfo">*</strong></label> 
         <select name="title" id="title" class="required"> 
         <option selected="selected">Please select</option> 
         <option value="Mr">Mr</option> 
         <option value="Mrs">Mrs</option> 
         <option value="Miss">Miss</option> 
         <option value="Dr">Dr</option> 
         </select> 
        </li> 
        <li class="active"> 
         <label class="checkoutLabel" for="firstName">First name <strong class="requiredInfo">*</strong></label> 
         <div class="checkoutInputLarge"> 
         <input type="text" name="firstName" id="firstName" class="required" /> 
         </div> 
        </li> 
        <li> 
         <label for="lastName" class="checkoutLabel">Last name <strong class="requiredInfo">*</strong> </label> 
         <div class="checkoutInputLarge active"> 
          <input type="text" name="lastName" id="lastName" class="checkoutInput1 required" /> 
         </div> 
        </li> 

        <li> 
         <label for="email" class="checkoutLabel">Email <strong class="requiredInfo">*</strong></label> 
         <div class="checkoutInputLarge"> 
          <input type="text" name="email" id="email" class="required" /> 
         </div> 
        </li> 
        <li> 
         <label for="phoneNumber" class="checkoutLabel">Phone number <strong class="requiredInfo">*</strong></label> 
         <div class="checkoutInputLarge"> 
          <input type="text" name="phoneNumber" id="phoneNumber" class="checkoutInput1 required" /> 
         </div> 
        </li> 
        <li> 
         <input type="checkbox" name="smsAlert" id="smsAlert" /><label for="smsAlert" class="smsAlertLabel">I wish to receive SMS alerts on my order status</label> 
        </li> 
        <li> 
         <label class="checkoutLabel">Are you a <br /> business customer? <strong class="requiredInfo">*</strong></label> 
         <input type="radio" name="businessCustomer" id="businessCustYes" value="yes" class="radio required" /><label class="businessCustomerLabels" for="businessCustYes">Yes</label> 
         <input type="radio" name="businessCustomer" id="businessCustNo" value="no" class="radio required" checked="checked" /><label class="businessCustomerLabels" for="businessCustNo">No</label> 
        </li> 
        </ul> 

Answer 1

ऐसी सीमा होने पर जहां आपके पास पहले नहीं था (या border-width बढ़ाना) प्रभावी रूप से तत्व को बड़ा कर देगा, इसलिए संभवतः अन्य तत्वों को स्थानांतरित करने के कारण। इससे बचने के लिए, आपको यह सुनिश्चित करने की कोशिश करनी चाहिए कि कुल आकार (ऊंचाई या चौड़ाई + पैडिंग + सीमा + मार्जिन) समान है। आपके मामले में, मुझे लगता है कि आपको फोकस करने के लिए फ़ोकस किए गए शैली में 2px मार्जिन जोड़ने का प्रयास करना चाहिए (क्योंकि केंद्रित तत्व की सीमा 2px बड़ी है)। प्रयास करें:

input[type="text"], 
    input[type="password"] { 
     border: 1px solid #CCCCCC; 
     box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.2); 
     min-height: 22px; 
     padding: 3px; 
     margin: 2px; 
    } 

.checkout input:focus { 
    border:3px solid #6b991c; 
    padding:2px; 
    margin: 0; 
} 

Answer 2

हाँ, क्योंकि क्षैतिज स्थान इनपुट क्षेत्र बढ़ जाती है के कब्जे में 6 पिक्सल जब यह फोकस लाभ है, क्योंकि सीमा केवल फोकस के दौरान लागू किया जाता है और यह 3px प्रत्येक पक्ष पर है। इसके बजाय एक सीमा को हर समय अस्तित्व में रखें और फोकस के दौरान सीमा-रंग संपत्ति को बदलें।

Answer 3

आज़माएं:

.checkout input:focus { 
    margin-right: 50px; 
    padding: 2px; 
    margin: -1px; 
} 

क्योंकि आप सीमा और विकेन्द्रित राज्य पर 2px की गद्दी पर 3px जोड़ लेते हैं तो ध्यान केंद्रित राज्य के लिए कुछ गणित करना होगा जब इसे केंद्रित नहीं किया जाता है तो इसे बराबर बनाने के लिए। आपके मामले में, केंद्रित राज्य पर मार्जिन पर -1px कर कूदना रद्द कर देना चाहिए।