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

Question

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

Comments

যেহেতু আমি একাধিক জায়গায় ফোকাস নির্বাচককে দেখতে পাচ্ছি আমি নিশ্চিত এটির পরিবর্তন করা উচিত ছিল না?

— felix001

দৃশ্যত @ এমডো হ'ল কম ভেরিয়েবল সহ গ্লো কালার নির্দিষ্ট করার অনুমতি দেওয়ার বিরুদ্ধে 100%: github.com/twitter/bootstrap/issues/2742

— বেন হ্যারল্ড

Answer 1

শেষ পর্যন্ত আমি বুটস্ট্র্যাপ সিএসএসে নিম্নলিখিত সিএসএস এন্ট্রি পরিবর্তন করেছি

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

Comments

আমি লক্ষ্যবস্তু করে এসেছিinput[type] {}

— মর্ফিয়াস

বুটস্ট্র্যাপ 3.x এর সাথে এটি আর দরকার নেই। আরও তথ্যের জন্য আমার উত্তর দেখুন।

— Nate T

@ ক্রিকেট এই পরিবর্তনশীলটি বর্তমানে বুস্টারপ কাস্টমাইজারে পাওয়া যায় না :(

— ক্যামনস

@ ক্যামনস এখন এটি। আমি @input-border-focusএই উত্তরের পরিবর্তে ব্যবহার করার পরামর্শ দেব ।

— Nate T

আপনি ভুলে গেছেনselect

— ডেভিড

Answer 2

আপনি .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);
}

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

Comments

ওপি যা চেয়েছিল তা নয়। তিনি কীভাবে গ্লোটি পরিবর্তন করবেন, সীমান্ত নয়

— কেভিন মার্টিন হোসে

@ লোনওয়ার্ডটি ঠিক, আপনি সীমানা-বর্ণ এবং ছায়া-বর্ণ উভয়ই পরিবর্তন করতে হবে। আমি উত্তর আপডেট করেছি

— ইগাস্টার

এটি @ felix001 এর সমাধানের চেয়ে অনেক বেশি পরিষ্কার এবং এটি কাজ করে

— dspacejs

Answer 3

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

আরও তথ্য এবং সতর্কতার জন্য প্রতিশ্রুতি দেখুন ।

ইন _variables.scss আপডেট @input-border-focus।

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

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

Comments

কীভাবে এটি সম্পাদন করতে হয় বা কীভাবে করা যায় তার একটি উদাহরণ আছে? অগ্রিম ধন্যবাদ

— Seany84

আপনাকে বুটস্ট্র্যাপ স্টাইলশিটগুলির কম বা সাস সংস্করণ ব্যবহার করতে হবে । তারপরে, বুটস্ট্র্যাপ স্টাইলশিট আমদানির আগে আপনার কাস্টম ভেরিয়েবল সেট করুন এবং এটি বুটস্ট্র্যাপ ডিফল্টগুলিকে ওভাররাইড করবে। আপনাকে হয় আপনার স্টাইলশিটগুলি প্রাকম্পাইল করতে হবে বা স্প্রোককেটের মতো কিছু ব্যবহার করতে হবে ।

— Nate T

আপনি কম ভেরিয়েবলগুলিতে কাস্টম পরিবর্তন করতে অফিসিয়াল বুটস্ট্র্যাপ সাইটটি ব্যবহার করতে পারেন: getbootstrap.com/customize

— red_trumpet

দুর্দান্ত, তবে এটি কেবল বোতাম এবং অন্যান্য লিঙ্কগুলিতে প্রয়োগ হবে না, কেবল ইনপুট এবং টেক্সারিয়া, দৃশ্যত। বোতামগুলির জন্য, আপনাকে এখনও .btn:focus { outline: none; }উদাহরণস্বরূপ ওভাররাইড করতে হবে ।

— জোক

এই উত্তরটি SASS / SCSS ব্যবহারকারীদের জন্য কাজ করে। @ ইনপুট-অর্ডার-ফোকাস রয়েছে _variables.scss।

— TyMayn

Answer 4

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

দ্রুত ঠিক করা

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

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

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

Comments

দুর্দান্ত, এটি সহজ এবং কার্যক্ষম এবং আমারও সবুজ রঙের দরকার :)

— alfian5229

Answer 5

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

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

বাক্স-ছায়ায় সীমানা-রঙ এবং আরজিবা প্রতিস্থাপন করুন যা আপনার পছন্দ মতো রঙিন স্টাইল *।

Answer 6

বুটস্ট্র্যাপ 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;

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

Answer 7

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

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

Comments

আমি কীভাবে ক্রোম হলুদ রূপরেখা অক্ষম করতে পারি?

— রায় লি

আসলে, সমস্ত অক্ষম করবেন না: ফোকাসের রূপরেখা (যেমন আমি উপরে প্রস্তাব করেছি)) কেবল কীবোর্ড ব্যবহারকারীদের জন্য অ্যাক্সেসযোগ্যতার জন্য এটি ভয়াবহ। আপনি উপরের মতো প্ল্যাটফর্মের ডিফল্টগুলি অক্ষম করতে পারেন এবং উপযুক্ত অ্যাক্সেসযোগ্য কিছুতে যুক্ত করতে পারেন: outline: dotted thin black;(বা আপনার পরীক্ষার প্রস্তাব অনুযায়ী যা কিছু কাজ করে)

— পিটার

Answer 8

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

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

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

Comments

এটি আমার পক্ষে কাজ করেছে। তবে আমাকে সীমানা-রঙও যুক্ত করতে হবে কারণ এটি এটিকে নীল ছেড়ে দেয়।

— রাচেল এস

Answer 9

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

input, textarea, button {outline: none; }

Comments

আমি মনে করি আপনারও প্রয়োজন হতে পারে box-shadow: none;।

— রৌপ্যলিবিট

এটি আমার পক্ষে কাজ করেছিল, তবে !importantbox-shadow

— @ সিলভারলিবিট

Answer 10

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

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

  <body id="bootstrap-overrides">

সিএসএস ফাইল:

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

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

Answer 11

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

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

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

প্রয়োগ করা খুব সহজ, কেবল সীমানা বর্ণের সম্পত্তি পরিবর্তন করুন ।

Comments

অথবা SCSS ব্যবহার করা হয় তবে শুধু বুটস্ট্র্যাপ 4.0.0-beta জন্য $ ইনপুট ফোকাস সীমানা-রঙ পরিবর্তনশীল ওভাররাইড

— Zuhaib আলী

আমি মনে করি আপনার এটিকে যুক্ত করতে হবেbox-shadow: xpx ypx #80bdff;

Answer 12

বুটস্ট্র্যাপ ৩.৩. In এ আপনি কাস্টমাইজারের ফর্ম বিভাগে @ ইনপুট-বর্ডার-ফোকাস মানটি পরিবর্তন করতে পারেন:

Answer 13

আপ নির্মাণের @ wasinger উত্তর , উপরোক্ত মধ্যে বুটস্ট্র্যাপ 4.5 আমি না শুধুমাত্র রঙ ভেরিয়েবল ওভাররাইড করতে ছিল কিন্তু box-shadowনিজেই।

$input-focus-width: .2rem !default;
$input-focus-color: rgba($YOUR_COLOR, .25) !default;
$input-focus-border-color: rgba($YOUR_COLOR, .5) !default;
$input-focus-box-shadow: 0 0 0 $input-focus-width $input-focus-color !default;

Answer 14

শুধু ব্যবহার করবেন না কেন?

 input:focus{
        outline-color : #7a0ac5;
    }

Answer 15

আমি সিএসএস দিয়ে এটি সমাধান করতে পারিনি। দেখে মনে হচ্ছে বুটস্ট্র্যাপ শেষ কথাটি পাচ্ছে যদিও বুটস্ট্র্যাপের পরে আমার সাইটসিএসএস দ্বারা রয়েছে। যে কোনও ইভেন্টে, এটি আমার পক্ষে কাজ করেছিল।

$(document).ready(function () {
    var elements = document.getElementsByClassName("form-control");

    Array.from(elements).forEach(function () {
        this.addEventListener("click", cbChange, false);
    })

    });

function cbChange(event) {
    var ele = event.target;
    var obj = document.getElementById(ele.id);
    obj.style.borderColor = "lightgrey";
}

পরে আমি এটি সিএসএসে কাজ করতে পেলাম। স্পষ্টতই কেবল ফর্ম-নিয়ন্ত্রণগুলির সাথে

.form-control.focus, .form-control:focus {
    border-color: gainsboro;
} 

ক্রোম বিকাশকারী সরঞ্জামের শটগুলির আগে এবং পরে এখানে রয়েছে। ফোকাস ও ফোকাস বন্ধের মধ্যে সীমানার রঙের পার্থক্যটি লক্ষ্য করুন। পার্শ্ব নোটে, এটি বোতামগুলির জন্য কাজ করে না। বোতাম সহ। বোতামগুলির সাহায্যে আপনাকে কোনও রূপরেখা সম্পত্তি পরিবর্তন করতে হবে না।

Answer 16

ফোকাসের আগে ইনপুট সীমানার জন্য। আপনি ব্যবহার করতে চান আপনার পছন্দসই রঙ এবং প্যাডিং ইত্যাদির মতো অন্যান্য সিএসএস উল্লেখ করতে পারেন

.input {
    padding: 6px 190px 6px 15px;
    outline: #2a65ea auto 105px ;
}

যখন আমরা ইনপুট উপর ফোকাস। আপনি আপনার পছন্দসই রঙের আউটলাইনটি নির্দিষ্ট করতে পারেন

.input:focus{
    box-shadow: none;
    border-color: none;
    outline: lightgreen auto 5px ;
}

Answer 17

আপনি যদি ছায়াটি সরাতে চান তবে shadow-noneআপনার ইনপুট উপাদানটিতে ক্লাসটি পুরোপুরি যুক্ত করুন।