html w3schools বুটস্ট্র্যাপ ইনপুট ফোকাস নীল আলো পরিবর্তন করুন




jquery (10)

যে কেউ বুটস্ট্র্যাপ এর 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 এর পরে এটি লোড করুন। টেক্সট টেক্স, নির্বাচন ইত্যাদি সহ সমস্ত ইনপুটগুলিতে এটি প্রযোজ্য হবে ...


শেষ পর্যন্ত আমি 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;
}

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

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

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


আমি এই থ্রেডে গিয়েছিলাম সম্পূর্ণরূপে অদৃশ্য অক্ষম করার উপায় খুঁজছেন। অনেক উত্তর আমার উদ্দেশ্য জন্য overcomplicated ছিল। সহজ সমাধানের জন্য, আমি কেবল নিম্নরূপ সিএসএস এক লাইন প্রয়োজন।

input, textarea, button {outline: none; }

শরীরের ট্যাগ একটি আইডি যোগ করুন। আপনার নিজের সিএসএস (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 এভাররাইড করার সেরা উপায়


প্রকৃতপক্ষে, বুটস্ট্র্যাপ 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 পরিবর্তনশীলের মাধ্যমে ছায়া প্রস্থ নিয়ন্ত্রণ করতে পারেন।


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;
}

আপনি .form-control:focus সংশোধন করতে পারেন .form-control:focus বুটস্ট্র্যাপ স্টাইলটিকে এই ভাবে পরিবর্তন না করেই .form-control:focus :

দ্রুত ঠিক করা

.form-control:focus {
        border-color: #28a745;
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    } 

সম্পূর্ণ ব্যাখ্যা

  1. আপনি ব্যবহার করছেন যে bootstrapCDN সংস্করণ খুঁজুন। এখন আমার জন্য এখন 4.3.1: https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css
  2. আপনি পরিবর্তন করতে চান ক্লাসের জন্য অনুসন্ধান করুন। উদাহরণস্বরূপ। .form-control:focus আপনার CSS এ পরিবর্তন করতে চান এমন প্যারামিটারগুলি .form-control:focus এবং অনুলিপি করুন। এই ক্ষেত্রে border-color এবং box-shadow
  3. border-color রঙের জন্য একটি রঙ চয়ন করুন। এই ক্ষেত্রে আমি ধাপ 1 এ উল্লিখিত bootstrap.css পৃষ্ঠায় যে নির্দিষ্ট বর্গটি অনুসন্ধান করে, তাদের। .btn-success বর্গের জন্য বুটস্ট্র্যাপ ব্যবহার করে একই .btn-success বেছে নিতে পছন্দ করি।
  4. RGB এ আপনি যে রংটি বেছে নিয়েছেন তা রূপান্তর করুন এবং চতুর্থ RGBA প্যারামিটার (0.25) পরিবর্তন না করে box-shadow প্যারামিটারে যোগ করুন যা বুটস্ট্র্যাপটি স্বচ্ছতার জন্য রয়েছে।

যদি আপনি বুটস্ট্র্যাপ 3.x ব্যবহার করেন, তবে আপনি এখন নতুন @input-border-focus পরিবর্তনশীল রঙটি পরিবর্তন করতে পারেন।

আরো তথ্য এবং সতর্কবার্তা জন্য কমিটি দেখুন।

_Variables.scss আপডেট @input-border-focus

আকার / এই গ্লাভের অন্যান্য অংশের সংশোধন করতে মিক্সিনস / _forms.scss পরিবর্তন করুন

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




twitter-bootstrap