মোবাইল সাফারি (আইফোন) এ টেক্সারিয়ার অভ্যন্তরীণ ছায়া সরিয়ে ফেলুন

Question

ডিফল্টরূপে, মনে হয় মোবাইল সাফারি টেক্সারিয়া সহ সমস্ত ইনপুট ক্ষেত্রে শীর্ষের অভ্যন্তরীণ ছায়া যুক্ত করে। এটি অপসারণ করার কোন উপায় আছে?

আপনার সাদা ব্যাকগ্রাউন্ড থাকলে এটি বিশেষত কুশ্রী।

Answer 1

এই CSS স্টাইল যুক্ত করে:

-webkit-appearance: none;

Comments

ইনপুট টাইপ চেকবক্স এবং রেডিও বোতাম নির্বাচনকারীদের মধ্যে এই সম্পত্তি যুক্ত করার সময় সতর্কতা অবলম্বন করুন, কারণ এটি চেকবক্সগুলি এবং রেডিও বোতামগুলি আড়াল করে;)

— জয়ন শাইখ

উত্তরের জন্য ধন্যবাদ লিয়ন। বিটিডব্লিউ, এটির ব্যবহারের সর্বোত্তম উপায় হ'ল এটিতে প্রয়োগ করা textarea, input[type="text"], input[type="submit"]।

— jgthms

ভুলেও input[type="password"]চলবে না

— নিক পাইট

ভুলেও না [type="email"]!

— উইলস্টার 12

আপনি কোন ইনপুট ধরণের ব্যবহার করছেন তার উপর নির্ভর করে অপারেটরটি ব্যবহার করা সহজ হতে পারে:input:not([type=checkbox]):not([type=radio])

— জাস্টিন ফিশার

Answer 2

সিএসএস স্টাইল যুক্ত করার সময়

-webkit-appearance: none;

কাজ করবে, এটি সবকিছু থেকে মুক্তি পেয়ে যায়। পরিবর্তে আপনি এটি চেষ্টা করতে পারেন:

box-shadow: none !important;

এভাবে আপনি ডাউন-তীরটি রাখুন।

Comments

কেবল বাক্স-ছায়া সম্পত্তি যুক্ত করা কার্যকর হয় না। অভ্যন্তরীণ ছায়া এখনও iOS এ সাফারিতে প্রদর্শিত হয়।

— নীরবতা

Answer 3

এখানে সহজ সমাধান

input[type=text] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

Answer 4

কখনও কখনও আপনি সেখানে স্টাইলশিট রাখতে পারেন appearance: none;যাতে এটি ঠিক করার কোনও উপায় হয়ে যায় যখন এটি ঘটে তখন তা হ'ল ব্যবহার করাcaret । সবচেয়ে ভাল উপায় হ'ল আপনার কোডটি আবার লিখতে এবং আপনার কোডটির কোন অংশটি সেখানে স্টাইলের মধ্যে বিশৃঙ্খলা জাগিয়ে তুলবেnone

ব্যবহারের আগে caretআপনার এটি জানা দরকার যে এটি অন্যান্য স্টাইলগুলির সাথে আপনাকে কিছুটা সমস্যা পেতে পারে

-webkit-appearance: caret;
   -moz-appearance: caret;
     -o-appearance: caret;
        appearance: caret;

দ্রষ্টব্য: ব্যবহার none, caretসর্বোত্তম নয়।

Answer 5

https://stackoverflow.com/a/51626446/9287284

background-clip: padding-box;

এবং আমি এখানে একটি পুরানো একই উত্তর মন্তব্য পাওয়া যায়।

https://stackoverflow.com/a/29750016/9287284

Answer 6

এর উভয় backgroundএবং borderCSS বৈশিষ্ট্য নির্ধারণ করেinput ট্যাগ এছাড়াও কাজ মনে হয়।

এটা চেষ্টা কর:

<style>
input {
    background: #ccc;
    border: none;
}
</style>

<form>
First name: <input type="text"/><br />
Last name: <input type="text" />
</form>

Comments

ভুল এবং বিভ্রান্তিকর। পোস্ট করার আগে দয়া করে আপনার কোডটি সঠিক ডিভাইসে পরীক্ষা করুন ...

— এরিয়েল

সত্যিই ভুল উত্তর, ওপি যা যা জিজ্ঞাসা করে সে সম্পর্কে কিছুই নেই

— জ্যাকটা