সাফারি / ক্রোম টেক্সটিনপুট / টেক্সেরিয়া আভা সরান

Question

আমি ভাবছি যে সিএসএস ব্যবহার করে কোনও পাঠ্য ইনপুট / পাঠ্য অঞ্চলে ক্লিক করার পরে ডিফল্ট নীল এবং হলুদ আভা সরিয়ে নেওয়া কি সম্ভব?

Comments

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

— ল্যাংডন

যখন প্রশ্নটি প্রযুক্তিগত হয় তখন লোকেদের কিছু করা "সঠিক জিনিস" কিনা তা নিয়ে দার্শনিক কথোপকথন শুরু করার সময় লোকেরা সত্যিই বিরক্ত হয়।

— টিম

আমি একটি অনলাইন স্প্রেডশিট তৈরি করছি, স্টিভ, তাই এটি আমার ব্যবহারের পক্ষে উপযুক্ত হবে। এটি নির্ভর করে, তবে যদি এটি কেবল একটি সাধারণ ফর্ম হয় তবে আপনার বাহ্যরেখাটি যেমন আছে তেমনই ছেড়ে দেওয়া উচিত।

— উইলিয়াম 44isme

আমি মনে করি এটি অক্ষম করা এবং একটি কাস্টম তৈরি করা পুরোপুরি ঠিক আছে: CSS এর সাথে ফোকাস প্রভাব ...

— ithil

এছাড়াও, কীভাবে কোনও কিছু অক্ষম করবেন তা জানার অর্থ এই নয় যে এটি অপরিবর্তনীয়। যে কোনও ক্লায়েন্টের জন্য কাজ করে এমন যে কেউ জানেন যে তারা হয়ত এক উপায়ে রেন্ডার করা কিছু দেখতে চায় এবং তারপরে এটিকে মূল / ডিফল্ট পথে ফিরে যেতে পারে। অ্যাক্সেসযোগ্যতার জন্য তাদের বক্তৃতা করা সেই আকাঙ্ক্ষাকে পরিবর্তন করবে না বা কাউকে খুশি করবে না।

— জ্যাকগল্ড

Answer 1

textarea, select, input, button { outline: none; }

যদিও, এটি যুক্তিযুক্ত ছিল যে আভা / আউটলাইন রাখা অ্যাক্সেসযোগ্যতার জন্য আসলে উপকারী কারণ এটি ব্যবহারকারীদের বর্তমানে কোন উপাদানটি ফোকাস করছে তা দেখতে সহায়তা করতে পারে।

আপনি সিউডো-এলিমেন্ট ': ফোকাস' ব্যবহার করতে পারেন যখন ব্যবহারকারীরা সেগুলি নির্বাচন করেছেন কেবলমাত্র ইনপুটগুলিকে লক্ষ্য করতে।

ডেমো: https://jsfiddle.net/JohnnyWalkerDesign/xm3zu0cf/

Comments

নিখুঁত, অনেক অনেক এছাড়াও ভাবছি, আমি কি টেক্সারিয়াকে পুনরায় আকার দেওয়ার বিকল্পটি (টেক্সারিয়ার নীচে ডানদিকে) অপসারণ করতে পারি?

— এলেক স্মার্ট

সাবধানতার জন্য +1; দয়া করে এমন কোনও কিছু এড়াতে চেষ্টা করুন যা তাদের প্ল্যাটফর্মটি কীভাবে কার্য সম্পাদন করে তা ব্যবহারকারীর প্রত্যাশা ভঙ্গ করে; আপনি সম্ভবত তাদের উত্পাদনশীলতার ক্ষতি করছেন এবং আপনার ওয়েবসাইটকে ব্যবহার করা আরও কঠিন করে তুলতে পারেন।

— রব

আপনার নিজের বিপদে আমার ক্রোম / সাফারি টেক্সারিয়া পুনরায় আকার বিকল্পটি সরান! আমি এটি সত্যিই দরকারী, এমনকি কিছু সাইটে অপরিহার্য বলে মনে করি।

— জিবিবি

রাইজ হ্যান্ডেল থেকে মুক্তি পাওয়ার জন্য: পুনরায় আকার: কিছুই নয়;

— ড্যানিয়েল

বক্স ছায়া: কেউ না;

— স্টাইলগুলি

Answer 2

এই প্রভাবটি নন-ইনপুট উপাদানগুলিতেও ঘটতে পারে। আমি আরও সাধারণ সমাধান হিসাবে নিম্নলিখিত কাজগুলি পেয়েছি

:focus {
  outline-color: transparent;
  outline-style: none;
}

---

আপডেট: আপনাকে :focusনির্বাচক ব্যবহার করতে হবে না । আপনার যদি কোনও উপাদান থাকে, বলুন <div id="mydiv">stuff</div>এবং আপনি এই ডিভ উপাদানটির উপর বাইরের আভা পেয়ে যাচ্ছেন, কেবল স্বাভাবিকের মতো প্রয়োগ করুন:

#mydiv {
  outline-color: transparent;
  outline-style: none;
}

Comments

এটি কাজ করে, উদাহরণস্বরূপ <button>উপাদানগুলির জন্য , যা গ্লো-অন-ফোকাস থেকে বিশেষত সুবিধা দেয় না যেহেতু বেশিরভাগই আপনি যেভাবেই এটি ক্লিক করছেন।

— কাসিমির

গৃহীত উত্তরটি ওএসএক্স-এ Chrome এ আমার জন্য কাজ করে না। এই সমাধান কাজ করে।

— বার্ট

এছাড়াও এই কৌশলটি ব্যবহার করে, আপনি ফোকাসটি বজায় রাখতে পারবেন তবে আপনার সাইটের স্টাইলকে পুরোপুরি মুছে ফেলার জন্য আপনার পছন্দের শক্ত রঙ ইত্যাদি হিসাবে রূপরেখার মানটি পুনরায় সংজ্ঞায়িত করুন যদি এটি সম্পূর্ণরূপে অপসারণ করা সম্পূর্ণ সন্তোষজনক না হয়।

— নিল মনরো

ক্রোমের সর্বশেষ সংস্করণে আমার পক্ষে কাজ করেনি45.0.2454.101 m

— J86

@ কার্ল-ডাব্লু এর উত্তরটি উপেক্ষা করা উচিত নয়! - jQuery ব্যবহার করার সময় এটি একটি অ্যাঙ্করের সাথে একটি ডিভ হিসাবে লিঙ্ক করার জন্য দরকারী ছিল। আমি ডিভিতে একটি ইফ্রেম পুনরায় লোড করছি, তারপরে ম্যানুয়ালি পুনরায় লোড না করে অ্যাঙ্কারে যাচ্ছি। এটি অ্যাঙ্কারে পৃষ্ঠাটি নীচে স্ক্রোল করবে তবে পুরো ডিভের নীল বাহিরের আভা ছিল। এই ডিভাইসটি ডিভ উপাদানটিতে যুক্ত করেছে, এবং এটি কার্যকর হয়েছে! - উল্লেখ্য: আমি ব্যবহার করা হয়নি :focusনির্বাচক জন্য, আমি শুধু করা outline-colorএবং outline-styleআমার DIV আছে CSS উপর।

— ওয়েড

Answer 3

ওয়েবকিট ভিত্তিক ব্রাউজারগুলিতে টেক্সারিয়ার আকার পরিবর্তন:

টেক্সারিয়ায় সর্বাধিক উচ্চতা এবং সর্বাধিক প্রস্থ সেট করা ভিজ্যুয়াল পুনরায় আকার হ্যান্ডেলটি সরিয়ে ফেলবে না। চেষ্টা করুন:

resize: none;

(এবং হ্যাঁ আমি "ব্যবহারকারীর প্রত্যাশা ভঙ্গকারী কোনও কিছু এড়াতে চেষ্টা করুন" এর সাথে একমত, তবে কখনও কখনও এটি অর্থবোধ করে, অর্থাত্ ওয়েব অ্যাপ্লিকেশনের প্রসঙ্গে)

স্ক্র্যাচ থেকে ওয়েবকিট ফর্ম উপাদানগুলির চেহারা এবং অনুভূতিটি কাস্টমাইজ করতে:

-webkit-appearance: none;

Comments

এছাড়া এটি সম্পূর্ণ নিষ্ক্রিয় থাকলে শুধুমাত্র এক দিক মাপ, যা কিছু লেআউট সঙ্গে তার মিথস্ক্রিয়া সমাধান হতে পারে অনুমতি সম্ভব: পুনরায় আকার দেওয়ার সম্ভাব্য মান হয় none, both, horizontal, vertical, এবং inherit।

— বোয়ান

আমি এখানে 'ওয়েবেকিট-উপস্থিতি: কোনটিই নয়' দিয়ে দেওয়া সমাধানটি পছন্দ করি; - ইনপুট উপাদানগুলি থেকে সমস্ত স্টাইলিং সরিয়ে দেয়, যাতে আপনার প্রয়োজন অনুযায়ী স্টাইল করতে পারেন। ধন্যবাদ!

— হানাজায়ের

আমি জানি না কেন এর এতগুলি উত্সাহ রয়েছে, এটি মোটেই প্রশ্নের উত্তর নয়।

— প্যাডটক

Answer 4

কার্ল ডাব্লু :

এই প্রভাবটি নন-ইনপুট উপাদানগুলিতেও ঘটতে পারে। আমি আরও সাধারণ সমাধান হিসাবে নিম্নলিখিত কাজগুলি পেয়েছি

:focus {
  outline-color: transparent;
  outline-style: none;
}

আমি এটি ব্যাখ্যা করব:

• :focusএর অর্থ এটি ফোকাসে থাকা উপাদানগুলিকে শৈলী করে। সুতরাং আমরা ফোকাসে উপাদানগুলি স্টাইল করছি।
• outline-color: transparent; মানে নীল আভা স্বচ্ছ is
• outline-style: none; একই জিনিস।

Answer 5

আমি divএকটি ক্লিক ইভেন্ট ছিল এমন একটিতে এটি অভিজ্ঞতা পেয়েছি এবং 20 টি অনুসন্ধানের পরে আমি এই স্নিপেটটি পেয়েছি যা আমার দিনটি বাঁচিয়েছে।

-webkit-tap-highlight-color: rgba(0,0,0,0);

এটি ওয়েবকিট মোবাইল ব্রাউজারগুলিতে হাইলাইট করা ডিফল্ট বোতামটি অক্ষম করে

Answer 6

অ্যাক্সেসিবিলিটি সম্পর্কে যত্নশীল ব্যক্তিদের জন্য এটি সমাধান ।

দয়া outline:none;করে ফোকাসের রূপরেখাটি অক্ষম করার জন্য ব্যবহার করবেন না । আপনি যদি এটি করেন তবে আপনি ওয়েবে অ্যাক্সেসযোগ্যতা হারাচ্ছেন। এটি করার একটি অ্যাক্সেসযোগ্য উপায় আছে।

কীভাবে অ্যাক্সেসযোগ্য উপায়ে সীমান্ত সরানো যায় তা বোঝাতে আমি নিবন্ধটি লিখেছি Check

সংক্ষেপে ধারণাটি হ'ল কেবলমাত্র যখন আমরা কোনও কীবোর্ড ব্যবহারকারীকে সনাক্ত করি তখনই বাহ্যরেখা সীমানাটি দেখানো হয়। একবার কোনও ব্যবহারকারী তার মাউস ব্যবহার শুরু করলে আমরা রূপরেখাটি অক্ষম করি। ফলস্বরূপ আপনি দুটি সেরা পেতে।

Answer 7

আপনি যদি বুটস্ট্র্যাপের বোতামগুলি থেকে আভাস মুছে ফেলতে চান (যা আমার মতে খারাপ ইউএক্স প্রয়োজন হয় না), আপনার নিম্নলিখিত কোডের প্রয়োজন হবে:

.btn:focus, .btn:active:focus, .btn.active:focus{
  outline-color: transparent;
  outline-style: none;
}

Comments

ধন্যবাদ। .btn:active:focusবাস্তবে বোতামটি চেপে ধরে রাখার সময় আভাস অপসারণ করা দরকার ছিল।

— হোমারজাম

Answer 8

এই সমাধানটি আমার পক্ষে কাজ করেছিল।

input:focus {
    outline: none !important;
    box-shadow: none !important;
}

Answer 9

কিছু সময় এটি ঘটে বোতামগুলির পরে বাহ্যরেখাটি সরাতে নীচে ব্যবহার করুন

input:hover
input:active, 
input:focus, 
textarea:active,
textarea:hover,
textarea:focus, 
button:focus,
button:active,
button:hover
{
    outline:0px !important;
}

Answer 10

<select class="custom-select">
        <option>option1</option>
        <option>option2</option>
        <option>option3</option>
        <option>option4</option>
</select>

<style>
.custom-select {
        display: inline-block;
        border: 2px solid #bbb;
        padding: 4px 3px 3px 5px;
        margin: 0;
        font: inherit;
        outline:none; /* remove focus ring from Webkit */
        line-height: 1.2;
        background: #f8f8f8;

        -webkit-appearance:none; /* remove the strong OSX influence from Webkit */

        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
    }
    /* for Webkit's CSS-only solution */
    @media screen and (-webkit-min-device-pixel-ratio:0) { 
        .custom-select {
            padding-right:30px;    
        }
    }

    /* Since we removed the default focus styles, we have to add our own */
    .custom-select:focus {
        -webkit-box-shadow: 0 0 3px 1px #c00;
        -moz-box-shadow: 0 0 3px 1px #c00;
        box-shadow: 0 0 3px 1px #c00;
    }

    /* Select arrow styling */
    .custom-select:after {
        content: "▼";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        font-size: 60%;
        line-height: 30px;
        padding: 0 7px;
        background: #bbb;
        color: white;

        pointer-events:none;

        -webkit-border-radius: 0 6px 6px 0;
        -moz-border-radius: 0 6px 6px 0;
        border-radius: 0 6px 6px 0;
    }
</style>

Answer 11

আমি "স্লাইডিং ডোর" ধরণের ইনপুট বোতামের রূপরেখা সরিয়ে ফেলা সহায়ক বলে মনে করেছি, কারণ রূপরেখাটি স্লাইডিং ডোর ইমেজের ডান "ক্যাপ" কভার করে না যা ফোকাসের অবস্থাটি কিছুটা দুর্বল দেখাচ্ছে।

input.slidingdoorbutton:focus { outline: none;}

Answer 12

আমার পাঠ্য ইনপুট ক্ষেত্রগুলি থেকে আমার কেবল এই প্রভাবটি সরিয়ে নেওয়া দরকার ছিল এবং আমি অন্যান্য কৌশলগুলি ঠিকঠাকভাবে কাজ করতে পারি না, তবে এটি আমার পক্ষে কাজ করে;

input[type="text"], input[type="text"]:focus{
            outline: 0;
            border:none;
            box-shadow:none;

    }

ফায়ারফক্স এবং ক্রোমে পরীক্ষিত।

Answer 13

নিশ্চিত! আপনি * ব্যবহার করে সমস্ত এইচটিএমএল উপাদান থেকেও নীল সীমানা সরাতে পারেন

*{
    outline-color: transparent;
    outline-style: none;
  }

এবং

 *{
     outline: none;   
   }