এতে পাঠ্যের সীমানার রঙ কীভাবে পরিবর্তন করবেন: ফোকাস করুন

Question

আমাকে ক্ষমা করুন এটি একটি বোকা প্রশ্ন, তবে আমার সাহায্য দরকার। আমি ফোকাসে TEXTAREA এর সীমানা রঙ পরিবর্তন করতে চাই। তবে আমার কোডটি সঠিকভাবে কাজ করছে বলে মনে হচ্ছে না।

দয়া করে ফ্রেডে কোড দেখুন ।

<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

আপনি সীমানার জন্য যে রঙটি বেছে

— নিয়েছেন

Answer 1

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

Comments

আপনি ইনপুটটি পরিবর্তন করতে পারেন:। আপনি অতিরিক্ত নির্বাচককে সেভাবে পরিত্রাণ পান।

— হোস্টস

শুধু কৌতূহল, কেন পাঠ্যগ্রাহ্যদের প্রয়োজন হয় outline: noneতবে সাধারণ পাঠ্যবক্স ইনপুটগুলি কেন কেন না কেন ?

— জাস্টিন স্কাইলস

আমি মনে করি আরও ভালভাবে "আউটলাইন: কঠিন 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

হ্যাঁ, তবে রূপরেখাটি একটি আয়তক্ষেত্র নয়? আপনি যদি সীমানা-ব্যাসার্ধের সাথে বোতামগুলি / ইনপুটটি স্টাইল করছেন তবে ভাল নয়।

— জোসেফ ক্রিফেলস দ্বিতীয়

ব্রাউজারগুলি অ্যাক্সেসযোগ্যতার জন্য ফোকাসযুক্ত ক্ষেত্রগুলিকে হাইলাইট করার জন্য যা রূপরেখা ব্যবহার করে তা রূপরেখা। আমি যখনই সম্ভব এটির সাথে লেগে থাকার পরামর্শ দেব। স্পষ্টতই, আপনি যদি নকশাটি সুনির্দিষ্ট করে থাকেন তবে আপনি workaround তৈরি করতে পারেন :)

— গ্রাগুর

Answer 4

খুবই সোজা :

 outline-color : blue !important;

আমার রিএ্যাক্ট-বুস্ট্র্যাপ বোতামের পুরো সিএসএস হ'ল:

.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

আপনার কেবল স্কেস ভেরিয়েবলের দরকার

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