টুইটার বুটস্ট্র্যাপ টেক্সটবক্স গ্লো এবং শ্যাডোগুলিকে ওভাররাইড করুন

Question

আমি টেক্সটবক্স এবং সীমান্তের ব্লু গ্লো মুছে ফেলতে চাই, তবে আমি জেএস বা এর কোনও সিএসএস কীভাবে ওভাররাইড করব তা জানি না, এখানে চেক করুন

সম্পাদনা 1

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

Comments

আপনার কি নতুন ক্লাস যুক্ত করার ক্ষমতা আছে? যদি ঠিক border:none; box-shadow:none;

— তেমন

@ জেসচেফে এখানে , এবং এখনও কিছুই নেই

— ফাদি কামাল

আমি জিজ্ঞাসা করতে পারি আপনি কেন এইভাবে করতে চান? বিভিন্ন কারণে ক্লিকের উপর ফোকাস রাখার সুবিধা এটি।

— গ্লিন জ্যাকসন

@ গ্লিনজ্যাকসন দয়া করে সম্পাদনা 1

— ফাদি কামাল

ডাউনভোটের কারণ দেখবেন না। আমি একই ইস্যু মধ্যে দৌড়ে। তবে আমার ক্ষেত্রে বৈধতা ত্রুটিটি নির্দেশ করতে আমার সীমানাটিকে লাল করতে হবে। তবে গ্লোয়ের কারণে এটি কেবল অদৃশ্য ছিল।

— ওবাইক

Answer 1

.simplebox {
  outline: none;
  border: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

Answer 2

আপনি নিজের রঙ ব্যবহার করতে ডিফল্ট বুটস্ট্র্যাপ সেটিংস ওভাররাইড করতে পারেন

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(82, 168, 236, 0.8);
  outline: 0;
  outline: thin dotted \9;
  /* IE6-9 */

  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
}

Comments

এটি লক্ষ করার মতো যে এখানে <select>নির্বাচক অন্তর্ভুক্ত নেই।

— ব্রাইস ইয়র্ক

Answer 3

input.simplebox:focus {
  border: solid 1px #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  transition: none;
  -moz-transition: none;
  -webkit-transition: none;
}

ফোকাসবিহীন শৈলীতে বুটস্ট্র্যাপ সেট করে

Answer 4

আপনি যদি মনে করেন যে আপনি CSS ক্লাস পরিচালনা করতে পারবেন না তবে কেবল পাঠ্যক্ষেত্রটিতে স্টাইল যুক্ত করুন

<input type="text" style="outline:none; box-shadow:none;">

Answer 5

কিছু খনন করার পরে, আমি মনে করি তারা এটি সর্বশেষতম বুটস্ট্র্যাপে পরিবর্তন করেছে। নীচের কোডটি আমার পক্ষে কাজ করেছিল, এটির সহজ বাক্স নয় যে ফর্ম-নিয়ন্ত্রণটি আমি এটি ব্যবহার করছিলাম তা সমস্যার কারণ হয়ে দাঁড়িয়েছিল।

input.form-control,input.form-control:focus {
    border:none;
    box-shadow: none;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   -moz-transition: none;
   -webkit-transition: none;
}

Answer 6

কাস্টমাইজ বুটস্ট্র্যাপে যান , @ ইনপুট-বর্ডার-ফোকাসটির সন্ধান করুন, আপনার পছন্দসই রঙের কোডটি প্রবেশ করুন, নীচে স্ক্রোল করুন এবং "সংকলন এবং ডাউনলোড" ক্লিক করুন।

Answer 7

এটি সীমানা এবং ফোকাস নীল ছায়াকে সরিয়ে ফেলবে।

input.simplebox,input.simplebox:focus {
  border:none;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -moz-transition: none;
  -webkit-transition: none;
}

http://jsfiddle.net/pE5mQ/64/

Answer 8

বুটস্ট্র্যাপ 3 এ আইওএসের উপরে একটি ছোট শীর্ষ ছায়া রয়েছে, এটি দিয়ে এটি সরানো যেতে পারে:

input[type="text"], input[type="email"], input[type="search"], input[type="password"] {
    -webkit-appearance: caret;
    -moz-appearance: caret; /* mobile firefox too! */
}

এখান থেকে পেয়েছি

Comments

আপনার সরবরাহিত লিঙ্কের মন্তব্যগুলি দেখে, সাধারণত 'ক্যারেট'-এর পরিবর্তে' কিছুই না 'ব্যবহার করা ভাল।

— রায়ান ওয়ালটন

Answer 9

আপনি যদি লিগ্যাসি ব্রাউজারগুলিকে সমর্থন না করেন তবে বিক্রেতার উপসর্গগুলি এই মুহুর্তে প্রয়োজনীয় নয় এবং আপনি পৃথক প্রতিটি ধরণের পরিবর্তে সমস্ত ইনপুট উল্লেখ করে আপনার নির্বাচকদের সহজ করতে পারবেন।

input:focus,
textarea:focus,
select:focus {
  outline: 0;
  box-shadow: none;
}

Answer 10

এইচটিএমএল

<input type="text" class="form-control shadow-none">

সিএসএস

input:focus{
    border: 1px solid #ccc
}

Answer 11

.form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(103, 250, 34, 0.25);
}