আইফোন / সাফারি ইনপুট উপাদানগুলির রাউন্ডিং বন্ধ করুন

Question

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

সাফারিকে (সিএসএস বা মেটাডেটের মাধ্যমে) নির্দেশ দেওয়ার কোনও উপায় কি ইনপুট ক্ষেত্রগুলিকে বৃত্তাকার না করে উদ্দেশ্য হিসাবে সেগুলি আয়তক্ষেত্রাকার হিসাবে রেন্ডার করতে পারে?

Comments

আমি আশ্চর্য হই যে কেন কোনও সিএসএস রিসেটটিতে সেই দুর্দান্ত সহজ সিএসএস নিয়ম নেই। এটা ব্রেইনডেড।

— তোসকান

আমি এখানে উত্তরটিতে আপনি খুঁজে পেয়েছেন এমন প্রয়োজনীয় সিএসএসের সাথে এরিক মায়ারের সিএসএস রিসেট 2 এর উপর ভিত্তি করে একটি সিএসএস রিসেট তৈরি করেছি। এটি গিথুব

— তোসকান

সতর্কতা অবলম্বন করুন -webkit-appearance: none;, আমি একটি নির্দিষ্ট ইনপুট উপাদানগুলির শর্তে এই শর্তটি সীমাবদ্ধ করা ভাল বলে মনে করি। অন্যথায় এটি পৃষ্ঠাতে রেডিও ইনপুট উপাদানগুলি লুকিয়ে রাখতে পারে।

— চতুর্থ

Answer 1

আইওএস 5 এবং তারপরে, ভাল ওল ' border-radiusকৌশলটি করে:

input {
    border-radius: 0;
}

আপনার যদি কেবলমাত্র আইওএসের গোলাকার কোণগুলি অপসারণ করতে হবে বা অন্যথায় কোনও কারণে প্ল্যাটফর্মগুলি জুড়ে বৃত্তাকার কোণগুলি স্বাভাবিক করতে না পারে, -webkit-border-radiusপরিবর্তে উপসর্গযুক্ত সম্পত্তিটি ব্যবহার করুন, যা এখনও সমর্থিত। অবশ্যই নোট করুন যে অ্যাপল যে কোনও সময় উপসর্গযুক্ত সম্পত্তিটির জন্য সমর্থন বাদ দিতে বেছে নিতে পারে, তবে তাদের অন্যান্য প্ল্যাটফর্ম-নির্দিষ্ট সিএসএস বৈশিষ্ট্যগুলি বিবেচনা করে তারা এটিকে প্রায় রাখবে।

উত্তরাধিকার সংস্করণগুলিতে আপনাকে এর -webkit-appearance: noneপরিবর্তে সেট করতে হয়েছিল :

input {
    -webkit-appearance: none;
}

Comments

আইওএস 5 হিসাবে এটি কেবল অভ্যন্তরীণ ছায়া সরিয়ে ফেলবে। বৃত্তাকার কোণগুলিও সরাতে পীযূশের উত্তর পরীক্ষা করে দেখুন।

— জোনাথন ফ্রিল্যান্ড

-webkit-appearanceঅভ্যন্তরীণ ছায়া এবং বৃত্তাকার কোণগুলির সাথে আসলে কোনও সম্পর্ক নেই। এটি কেবল তার জন্য ব্যবহার করবেন না। css-infos.net/property/-webkit-appearance

— রুডি

"যদি আইওএস বৃত্তাকার কোণ এবং ছায়া চায় তবে আইওএস ব্যবহারকারীদের সেগুলি রাখুন": এটি আমার অবস্থানে সম্পূর্ণরূপে অগ্রহণযোগ্য এবং সম্ভবত বেশিরভাগের মধ্যেও রয়েছে।

— coredumperror

!! আপনার এই পদ্ধতিটি ব্যবহার করা উচিত নয়, এটি চেকবক্সটি অনুপলব্ধ বলে মনে করে Because কারণ এর ফলে আমার সাইটের অনেক ব্যবহারকারী অর্থ প্রদান চুক্তিতে এগিয়ে যায় না !!

— সিন্থ্রেসিন

জন্য <input type="search">iOS এ 10 আমি এখনও প্রয়োজন -webkit-appearance: none;।

— গ্যাব্রিয়েল স্মোলজির

Answer 2

input -webkit-appearance: none; একা কাজ করে না।

যোগ করার চেষ্টা করুন -webkit-border-radius:0px;।

Comments

আইওএস 5 এর বৃত্তাকার কোণগুলি সরাতে আমার -webkit-border-radiusএট্রিবিউটটি যুক্ত করার দরকার ছিল না<input type="text">

— জোনাথন ফ্রিল্যান্ড

0

— মিনিটস্কি

Answer 3

আইওএসের বৃত্তাকারটি সরিয়ে ফেলার সেরা উপায়।

textarea,
input[type="text"],
input[type="button"],
input[type="submit"] {
     -webkit-appearance: none;
     border-radius: 0;
}

দ্রষ্টব্য: দয়া করে নির্বাচন বিকল্পের জন্য এই কোডটি ব্যবহার করবেন না। এটি আমাদের নির্বাচনের ক্ষেত্রে সমস্যা হবে।

Comments

আমি খুঁজে পেয়েছি যে input[type]ব্যবহারটি সমস্ত ইনপুটগুলির জন্য কৌশলটি মনে করে।

— জ্যাকবডেডিভ

Answer 4

গৃহীত উত্তর রেডিও বোতামটি Chrome এ অদৃশ্য হয়ে যায়। এইটা কাজ করে:

input:not([type="radio"]):not([type="checkbox"]) {
    -webkit-appearance: none;
    border-radius: 0;
}

Answer 5

কম্পাস (এসসিএসএস) এর সম্পূর্ণ সমাধান এখানে দেওয়া হয়েছে:

input {
  -webkit-appearance: none;  // remove shadow in iOS
  @include border-radius(0);  // remove border-radius in iOS
}

Comments

কেবল একটি নোট, @include border-radius(0);মেশিনটি কেবল তখনই উপলভ্য যখন আপনি এটি নিজের দ্বারা সংজ্ঞায়িত করেছেন বা কম্পাস কাঠামোটি ব্যবহার করছেন, কেবল ভ্যানিলা এসএএসএস নয়।

— ওয়াফল

কেবল একটি নোট, আপনি যদি এসসিএসএস ব্যবহার করে থাকেন তবে আপনার সম্ভবত অটোপ্রিফিক্সারও ব্যবহার করা উচিত।

— খ্রিস্টান

Answer 6

আইফোন 3GS এর জন্য আইওএস 5.1.1 এ আমাকে একটি অনুসন্ধানের ক্ষেত্রের স্টাইলিং সাফ করতে হয়েছিল এবং এটি স্টাইলের উদ্দেশ্যে সেট করতে হয়েছিল

input[type="search"] {-webkit-appearance: none; border-radius: 0 3px 3px 0;}

এরকম -webkit-border-radius: 0;একা নেটিভ স্টাইলিং পরিষ্কার করা হয়নি। এটি একটি নেটিভ অ্যাপ্লিকেশনটিতে ওয়েব ভিউয়ের জন্যও ছিল।

Answer 7

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

input[type="submit"] { -webkit-appearance:none; -webkit-border-radius:0; }

Answer 8

আপনি যদি normalize.css ব্যবহার করেন তবে স্টাইলশীটটি এর মতো কিছু করবে input[type="search"] { -webkit-appearance: textfield; }।

এটির মতো একক শ্রেণির নির্বাচকের চেয়ে উচ্চতর স্বতন্ত্রতা রয়েছে .foo, তাই সচেতন হন যে আপনি কেবল ঠিক করতে পারবেন না .my-field { -webkit-appearance: none; }। আপনার যদি সঠিক নির্দিষ্টতা অর্জনের আরও ভাল উপায় না থাকে তবে এটি সহায়তা করবে:

.my-field { -webkit-appearance: none !important; }

Answer 9

দয়া করে এটি চেষ্টা করুন:

inputএটির মতো CSS যুক্ত করার চেষ্টা করুন :

 -webkit-appearance: none;
       border-radius: 0;

Answer 10

আমি একটি সাধারণ সীমানা ব্যাসার্ধ ব্যবহার করেছি: 0; পাঠ্য ইনপুট ধরণের জন্য বৃত্তাকার কোণগুলি সরাতে।

Answer 11

সাফারি এবং অন্যান্য ব্রাউজারগুলিতে বোতামগুলি যথাযথভাবে রেন্ডার করার জন্য, আপনাকে ওয়েবকিট-উপস্থিতি কারও কাছে সেট করা ছাড়াও বোতামগুলির জন্য একটি নির্দিষ্ট স্টাইল প্রদান করতে হবে, যেমন:

border-radius: 0;
-webkit-appearance: none;
background-image: linear-gradient(to bottom, #e4e4e4, #f7f7f7);
border: 1px solid #afafaf