html - w3schools - jquery




বুটস্ট্র্যাপ ইনপুট ফোকাস নীল আলো পরিবর্তন করুন (8)

Chrome যদি প্ল্যাটফর্ম ডিফল্ট "হলুদ" রূপরেখা প্রদর্শন করতে চায় তবে এখানে পরিবর্তনগুলি।

textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-    input:focus {
    border-color: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    outline: -webkit-focus-ring-color auto 5px;
}

যে কেউ বুটস্ট্র্যাপ এর input:focus পরিবর্তন করতে জানেন কিভাবে input:focus ? একটি input ক্ষেত্রের উপর ক্লিক করার সময় দেখায় নীল দাগ?


আপনি সমস্ত ইনপুট মেলে .form-control নির্বাচক ব্যবহার করতে পারেন। উদাহরণস্বরূপ লাল পরিবর্তন করতে:

.form-control:focus {
  border-color: #FF0000;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}

আপনার কাস্টম CSS ফাইল এ রাখুন এবং bootstrap.css এর পরে এটি লোড করুন। টেক্সট টেক্স, নির্বাচন ইত্যাদি সহ সমস্ত ইনপুটগুলিতে এটি প্রযোজ্য হবে ...


নীল উজ্জ্বলতা নিষ্ক্রিয় করতে (কিন্তু আপনি রঙ, আকার, ইত্যাদি পরিবর্তন করতে কোডটি সংশোধন করতে পারেন), আপনার CSS এ এটি যুক্ত করুন:

.search-form input[type="search"] {  
    -webkit-box-shadow: none;
    outline: -webkit-focus-ring-color auto 0px;
} 

এখানে একটি স্ক্রিনক্যাপচার প্রভাব দেখাচ্ছে: আগে এবং পরে:


প্রকৃতপক্ষে, বুটস্ট্র্যাপ 4.0.0-বিটা (অক্টোবর 2017 অনুযায়ী) ইনপুট উপাদানটি ইনপুট [টাইপ = "পাঠ্য"] দ্বারা উল্লেখ করা হয় না, ইনপুট উপাদানটির জন্য সমস্ত বুটস্ট্র্যাপ 4 বৈশিষ্ট্য আসলে ফর্ম ভিত্তিক।

তাই এটি .form-control ব্যবহার করছে : ফোকাস শৈলী। একটি ইনপুট উপাদান হাইলাইটিং "ফোকাস উপর" জন্য উপযুক্ত কোড নিম্নলিখিত:

.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: none;
}

বাস্তবায়ন সহজ, শুধু সীমানা রঙ সম্পত্তি পরিবর্তন।


বুটস্ট্র্যাপ 4-এ, যদি আপনি নিজের দ্বারা SASS সংকলন করেন তবে ফোকাস শেডোটির স্টাইলিং নিয়ন্ত্রণ করতে আপনি নিম্নোক্ত ভেরিয়েবলগুলি পরিবর্তন করতে পারেন:

$input-btn-focus-width:       .2rem !default;
$input-btn-focus-color:       rgba($component-active-bg, .25) !default;
$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color !default;

দ্রষ্টব্য: বুটস্ট্র্যাপ 4.1 হিসাবে, $input-btn-focus-color এবং $input-btn-focus-box-shadow ভেরিয়েবল শুধুমাত্র ইনপুট উপাদানের জন্য ব্যবহার করা হয় তবে বোতামগুলির জন্য নয়। বোতামগুলির জন্য ফোকাস শেডো box-shadow: 0 0 0 $btn-focus-width rgba($border, .5); হিসাবে হার্ডকোড করা হয় box-shadow: 0 0 0 $btn-focus-width rgba($border, .5); , তাই আপনি শুধুমাত্র $input-btn-focus-width পরিবর্তনশীলের মাধ্যমে ছায়া প্রস্থ নিয়ন্ত্রণ করতে পারেন।


বুটস্ট্র্যাপ v4.0.0 বিটা রিলিজের জন্য আপনাকে স্টাইলশীটটিতে যোগ করা নীচেরটির প্রয়োজন হবে যা বুটস্ট্র্যাপকে ওভাররাইড করে (সিডিএন এর পরে যোগ করুন বা বুটস্ট্র্যাপ v4.0.0 বিটা বা স্থানীয় লিঙ্কটি যুক্ত করুন !important স্টাইলিংয়ের জন্য !important :

.form-control:focus {
  border-color: #6265e4 !important;
  box-shadow: 0 0 5px rgba(98, 101, 228, 1) !important;
}

বক্স-শেডোতে সীমানা-রঙ এবং RGBA প্রতিস্থাপন করুন, যার সাথে আপনি যে রঙের শৈলী পছন্দ করেন *।


শরীরের ট্যাগ একটি আইডি যোগ করুন। আপনার নিজের সিএসএস (bootstrap.css নয়) নতুন আইডি আইডি নির্দেশ করে এবং আপনি যে শ্রেণী বা ট্যাগটি ওভাররাইড এবং নতুন বৈশিষ্ট্যগুলি সেট করতে চান তা সেট করুন। এখন আপনি আপনার পরিবর্তন হারানো ছাড়া যে কোন সময় বুটস্ট্র্যাপ আপডেট করতে পারেন।

এইচটিএমএল ফাইল:

  <body id="bootstrap-overrides">

CSS ফাইল:

#bootstrap-overrides input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="url"]:focus, textarea:focus{
  border-color: red;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
  outline: 0 none;
}

আরও দেখুন: বুটস্ট্র্যাপ CSS এভাররাইড করার সেরা উপায়


শেষ পর্যন্ত আমি bootstrap.css এ নিম্নলিখিত CSS এন্ট্রি পরিবর্তন করেছি

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {   
  border-color: rgba(126, 239, 104, 0.8);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
  outline: 0 none;
}







twitter-bootstrap