আইওএস বৃত্তাকার কোণগুলি এবং ইনপুটগুলিতে একদৃষ্টি forces

Question

আইওএস ডিভাইসগুলি ফর্ম ইনপুটগুলিতে বিশেষত ইনপুট [টাইপ = সাবমিট] এ প্রচুর বিরক্তিকর স্টাইল যুক্ত করে। ডেস্কটপ ব্রাউজারে এবং একটি আইপ্যাডে একই সাধারণ অনুসন্ধান ফর্মটি নীচে দেখানো হয়েছে।

ডেস্কটপ:

আইপ্যাড:

ইনপুট [টাইপ = টেক্সট] একটি সিএসএস বক্সের ছায়া ইনসেট ব্যবহার করে এবং আমি এমনকি ওয়েবেকিট-বর্ডার-ব্যাসার্ধ নির্দিষ্ট করে দিয়েছি; যা স্পষ্টতই ওভাররাইড হয়ে যায়। আমার ইনপুটটির রঙ এবং আকৃতি [প্রকার = জমা দিন] বোতামটি আইপ্যাডে সম্পূর্ণ জারজবদ্ধ হয়ে যায়। কেউ কি জানেন যে এটি ঠিক করতে আমি কী করতে পারি? আগাম ধন্যবাদ.

Comments

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

— অজৈবিক

আপনি নির্দিষ্ট -webkit-border-radius:none;করেছেন border-radius:none;?

— রিগেল গ্লেন

আমার জন্য আইওএসের কৌশলটি নির্দিষ্ট করে -webkit-appearance:noneএবং -webkit-border-radius:0করল!

— Primus202

Answer 1

আমার যে সংস্করণটি কাজ করেছিল তা হ'ল:

input {
    -webkit-appearance: none;
}

কিছু ওয়েবকিট ব্রাউজার সংস্করণে, আপনি border-radiusস্থির থাকা সত্ত্বেও মুখোমুখি হতে পারেন । নিম্নলিখিত সঙ্গে রিসেট:

input {
    -webkit-border-radius:0; 
    border-radius:0;
}

এই সব WebKit স্টাইল প্রয়োগ করতে বাড়ানো যেতে পারে formযেমন উপাদান input, select, buttonবা textarea।

মূল প্রশ্নের প্রসঙ্গে, কোনও ইউনিট ভিত্তিক সিএসএস উপাদান সাফ করার সময় আপনি 'কিছুই না' মান ব্যবহার করবেন না। এছাড়াও জেনে রাখুন যে Chrome এ এই চামড়া চেকবাক্সগুলি, তাই সম্ভবত মত কিছু ব্যবহার হতে input[type=text]বা input[type=submit], input[type=text]বা এর পরিবর্তে ঐ যে যেমন বৃত্তাকার কোণ সেটিংস ব্যবহার করবেন না ফিল্টার করে বের করে input:not([type=checkbox]), input:not([type=radio])।

Comments

-ওয়েবেকিট-উপস্থিতি: কিছুই নয়; Chrome এ চেকবক্সগুলি লুকিয়ে রাখে - কোনও বৈধ সমাধান নয়!

— নিকো ওয়েস্টারডেল

-ওয়েবেকিট-উপস্থিতি: কিছুই নয়; কৌতুক করে! (-ওয়েবেকিট-সীমানা-ব্যাসার্ধের প্রয়োজন নেই)

— ওজজিআইই

ভাল পয়েন্ট - ব্রাউজার সংস্করণ উপর নির্ভর করে, আমি খুঁজে পেয়েছি, যাতে এটি একটি ব্যর্থ সাফ জন্য শুধুমাত্র সেখানে। প্রাসঙ্গিকতার জন্য পোস্টটি সম্পাদনা করব।

— মার্কসাইজম

ইনপুট: না ([টাইপ = "চেকবক্স"]) Chrome এ সমস্যা এড়াতে ভাল উপায় হতে পারে? যদিও এটি আই <= 8 তে কাজ করবে না তবে আবার, আপনি ঠিক করার চেষ্টা করছেন এটি নয়।

— রবিন ফরাসী

ব্যবহারের input:not([type=checkbox]), input:not([type=radio])অর্থ হল যে সাফারির সমস্ত বোতামে স্টাইলটি প্রযোজ্য, যেহেতু প্রতিটি বোতাম এই দুটি শর্তের মধ্যে একটিকে সন্তুষ্ট করে। পরিবর্তে, আমি ব্যবহার input[type=submit], input[type=text]।

— মাইগুয়েলমোরিন

Answer 2

আপনি আরও কিছু ওয়েবকিট ফর্ম, ইনপুট ইত্যাদি স্টাইলিং থেকে মুক্তি পেতে পারেন:

input, textarea, select {
   -webkit-appearance: none;
}

Comments

এটি এখনও border-radius: 0;পুরোপুরি পুনরায় সেট করা প্রয়োজন , এবং একটি সীমানা ব্যাসার্ধ চান না। অন্যথায় ঠিক সেট border-radius।

— রিফিলন

Answer 3

জমা দেওয়ার বোতামটি ব্যবহার করবেন না:

<input type="submit" class="yourstylehere" value="submit" />

পরিবর্তে বোতাম ট্যাগটি ব্যবহার করুন:

<button type="submit" class="yourstylehere">Submit</button>

এটি আমার পক্ষে কাজ করেছে।

Comments

এফডব্লিউআইডাব্লু, একটি প্রকল্পে সবেমাত্র এই সমস্যাটি ছিল এবং আমি আইপ্যাড 1 টিও <button>ট্যাগগুলিতে যুক্ত শৈলীতে পরীক্ষা করছিলাম । সুতরাং আমি মনে করি আপনি সরাসরি সিএসএসের সাহায্যে এটি সমাধান করা ভাল।

— নিমজি

Answer 4

করার জন্য একটি চেহারা আছে normalize.css

একটি ডেমো রয়েছে যেখানে আপনি ফর্মের উপাদানগুলি পরীক্ষা করতে পারেন এবং দেখতে পারেন যে তারা আইওএস-এ কেমন দেখাচ্ছে। একাধিক ওয়েবকিট ওরিয়েন্টেড বৈশিষ্ট্য রয়েছে।

Answer 5

আমার প্রকল্পগুলিতে এটিই আমি ব্যবহার করি

* { 
    -webkit-tap-highlight-color: transparent; 
}
a, article, div, h1, h2, h3, h4, h5, h6, img, section, span {
    -moz-user-select: none; 
    -webkit-user-select: none; 
}
input, select, textarea { 
    -webkit-appearance: none; 
    -webkit-border-radius:0; 
    border-radius: 0; 
}

Answer 6

আপনার যদি নিম্নলিখিতগুলি থাকে তবে আপনি কিছু ব্রাউজারেও এই সমস্যাটি পান:

<a class="btn btn-primary" href="#" type="button">Link</a>

পরিবর্তে:

<a class="btn btn-primary" href="#" role="button">Link</a>

যদি আপনি কোনও আনকার উপাদানটির জন্য আপনার ইনপুট উপাদানটি পরিবর্তন করেন typeএবং এতে পরিবর্তন করতে ভুলে যান তবে এটি ঘটতে পারে role।

আমার আইপ্যাডে ক্রোম এবং সাফারি উভয় ক্ষেত্রেই আমার এই সমস্যা ছিল।