আইওএস ইনপুট ছায়া সরান

Question

আইওএসে (সাফারি 5) ইনপুট উপাদানগুলির (শীর্ষের অভ্যন্তরীণ ছায়া) জন্য আমাকে অনুসরণ করতে হবে:

আমি শীর্ষ ছায়াটি সরাতে চাই, বাগ -webkit-appearanceসংরক্ষণ করতে পারে না।

বর্তমান শৈলীটি হ'ল:

input {    
    border-radius: 15px;
    border: 1px dashed #BBB;
    padding: 10px;
    line-height: 20px;
    text-align: center;
    background: transparent;
    outline: none;    
    -webkit-appearance: none;
    -moz-appearance: none;
}

Comments

পার্শ্ব নোট হিসাবে, আপনার একটি সাধারণ inputনির্বাচিত নেভিগেশন 'ওয়েবেকিট-উপস্থিতি' যত্নবান হওয়া উচিত । এটি রেডিও বোতাম এবং চেকবক্সগুলিতে অযাচিত প্রভাব ফেলতে পারে।

— ডেভিডপলজুনিয়র

ধন্যবাদ আমি এটিকে উপাদানটিতে ব্যবহার করেছি

— WHITECOLOR

Answer 1

আপনাকে -webkit-appearance: none;ডিফল্ট আইওএস স্টাইলগুলি ওভাররাইড করতে ব্যবহার করতে হবে। তবে, সিএসএসে কেবল inputট্যাগ নির্বাচন করা ডিফল্ট আইওএস স্টাইলগুলিকে ওভাররাইড করে না, কারণ আইওএস একটি অ্যাট্রিবিউট সিলেক্টর ব্যবহার করে এটি স্টাইল যুক্ত করে input[type=text]। সুতরাং আপনার সিএসএসের পূর্বনির্ধারিত ডিফল্ট আইওএস সিএসএস শৈলীগুলিকে ওভাররাইড করতে একটি বৈশিষ্ট্য নির্বাচনকারী ব্যবহার করতে হবে।

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

input[type=text] {   
    /* Remove First */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Then Style */
    border-radius: 15px;
    border: 1px dashed #BBB;
    padding: 10px;
    line-height: 20px;
    text-align: center;
    background: transparent;
    outline: none;    
}

সাহা্য্যকারী লিংক:

আপনি appearanceএখানে আরও শিখতে পারেন :

http://css-tricks.com/almanac/properties/a/appearance/

আপনি যদি সিএসএস বৈশিষ্ট্য নির্বাচনকারীদের সম্পর্কে আরও জানতে চান তবে আপনি এখানে একটি খুব তথ্যমূলক নিবন্ধটি পেতে পারেন:

http://css-tricks.com/attribute-selectors/

Comments

আপনি এই স্টাইলগুলিতেও প্রয়োগ করতে চাইতে পারেন input[type=password]।

— রক্যালাইট

এই পোস্টটির বয়স প্রায় 4 বছর। এই আপডেট করা প্রয়োজন?

বর্তমানে ব্যবহৃত সাফারি নির্বাচনকারী textarea, input[type="range"], input, input:matches([type="password"], [type="search"])- এটি ব্যবহার করুন এবং এটি সমস্ত ক্ষেত্রে কাজ করা উচিত।

— দা_বারনি

আমার জন্য তা শুধুমাত্র যখন আমি আবেদন কাজ !importantকরার appearance। এছাড়াও পাশাপাশি appearanceকাজ করা উচিত select।

— রুইভোয়াস

Answer 2

background-clip: padding-box;

পাশাপাশি ছায়াগুলি অপসারণ বলে মনে হচ্ছে।

যেমন @ ডেভিডপলজুনিয়ার উল্লেখ করেছেন; -webkit-appearanceসাধারণ ইনপুট নির্বাচকের উপর সাবধানতা অবলম্বন করুন।

Comments

background-clip: padding-box;আইওএসের পাঠ্য ইনপুট ক্ষেত্রের মধ্যে ছায়া সরিয়ে ফেলবে। উদাহরণস্বরূপ codepen.io/jstnrs/pen/YXBLVN দেখুন (কোনও আইওএস ডিভাইসে URL টি খোলার বিষয়টি নিশ্চিত করুন)।

— jstnrs

এটি কাজ করে তবে কীভাবে এটি কাজ করে কেউ জানেন? ধন্যবাদ

— নস্টালজি.ও

আমার পক্ষে কাজ করেনি তবে -webkit-appearance: none;করেছেন।

— লেফি তারিক

Answer 3

ওয়েবকিট সমস্ত সম্পত্তি মুছে ফেলবে

-webkit-appearance: none;

আপনার ইনপুট উপাদানটির ছায়া সরাতে সম্পত্তি বাক্স-ছায়া ব্যবহার করার চেষ্টা করুন

box-shadow: none !important;

Answer 4

আমি একটি সমাধান নিয়ে আসার চেষ্টা করেছি যা ক।) কাজ করে এবং খ) আমি বুঝতে পারি যে এটি কেন কাজ করে ।

আমি জানি যে ইনপুটগুলির জন্য ছায়া (এবং ইনপুটের জন্য বৃত্তাকার সীমানা [টাইপ = "অনুসন্ধান"]) একটি পটভূমি-চিত্র থেকে আসে।

স্পষ্টতই সেটিংটি background-image: noneআমার প্রথম প্রচেষ্টা ছিল, তবে এটি কাজ বলে মনে হয় না।

background-image: url()কাজগুলি সেট করা , তবে আমি খালি থাকার বিষয়ে এখনও উদ্বিগ্ন url()। বর্তমানে এটি কেবল একটি খারাপ অনুভূতি।

background-clip: padding-box; কাজটিও কাজটি করার মতো বলে মনে হচ্ছে, তবে "ব্যাকগ্রাউন্ড-ক্লিপ" ডক্স পড়ার পরেও আমি কেন পাই না যে এটি পুরোপুরি ব্যাকগ্রাউন্ডটি সরিয়ে দেয়।

আমার প্রিয় সমাধান:

background-image: linear-gradient(transparent, transparent);

এটি বৈধ CSS এবং আমি এটি কীভাবে কাজ করে তা বুঝতে পারি।

Comments

@ বাগুইস্পেরার এটি আমার জন্য আইওএস 12.4 এ কাজ করে: codepen.io/receter/pen/ymMzRG আপনি আরও বিশদ সরবরাহ করতে পারেন?

— Andreas Riedmüller

আমার জন্য কাজ না, কিন্তু background-clip: padding-box !importantকাজ।

— ওল্ডবয়

@BugWhisperer আপনি না পরীক্ষা করতে যদি উপর উদাহরণ codepen.io/receter/pen/ymMzRG আপনার জন্য কাজ করে? আপনার background-image: linear-gradient(transparent, transparent) !important;জন্য কাজ করে যদি আপনি চেষ্টা করতে পারেন ? এখানে সমস্যাটি কী তা জানতে পেরে আমি আনন্দিত হব।

— আন্দ্রেয়াস রিডমেলার 13

দুর্ভাগ্যক্রমে আমি আমার ফোনটি আপডেট করেছি। এঁরা সকলেই কোডেপেনের মাধ্যমে সাফারি ও ক্রোমে কাজ করেন তবে আমি আশ্চর্য হই যে আপনি যদি

— দেশীয়ভাবে

Answer 5

যতক্ষণ গৃহীত উত্তর একটি ভালো শুরু, যেমন অন্যদের নির্দিষ্ট আছে, এটি শুধুমাত্র ইনপুট যার জন্য কাজ করে typeযায় "text"। অন্যান্য ইনপুট ধরণের অগণিত রয়েছে যা আইওএস-এ পাঠ্য বাক্স হিসাবেও রেন্ডার হয় এবং তাই এই অন্যান্য প্রকারগুলি আমলে নিতে আমাদের এই বিধিটি প্রসারিত করতে হবে।

বোতাম, চেকবক্স, রেঞ্জ স্লাইডার, তারিখ / সময় ড্রপডাউন এবং রেডিও বোতামগুলির জন্য ডিফল্ট স্টাইলিং সংরক্ষণ করার সাথে সাথে অভ্যন্তরীণ ছায়ার ইনপুট পাঠ্য ক্ষেত্রগুলি এবং টেক্সটরিয়াস মুক্ত করতে আমি সিএসএস ব্যবহার করছি, এগুলি সবই নম্র <input>ট্যাগ ব্যবহার করে রচিত ।

textarea,
input:matches(
  [type="email"],
  [type="number"],
  [type="password"],
  [type="search"],
  [type="tel"],
  [type="text"],
  [type="url"]
) {
  -webkit-appearance: none;
}

Answer 6

এটি আমার পক্ষে আরও ভাল কাজ করে। এছাড়াও এটির অর্থ হ'ল আমাকে এটি প্রতিটি ভিন্ন ধরণের ইনপুট (যেমন পাঠ্য, টেল, ইমেল ইত্যাদি) এ প্রয়োগ করতে হবে না।

* {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}