ইনপুট টাইপ = "সংখ্যা" এ ওয়েবকিটের স্পিন বোতাম অক্ষম করবেন?

Question

আমার কাছে একটি সাইট রয়েছে যা প্রাথমিকভাবে মোবাইল ব্যবহারকারীদের জন্য তবে ডেস্কটপটিও।

মোবাইল সাফারিতে, <input type="number">দুর্দান্ত কাজ করে কারণ এটি ইনপুট ক্ষেত্রগুলিতে সংখ্যাসূচক কীবোর্ড নিয়ে আসে যার মধ্যে কেবল সংখ্যা থাকা উচিত।

ক্রোম এবং সাফারিতে তবে সংখ্যা ইনপুটগুলি ব্যবহার করে মাঠের ডানদিকে স্পিন বোতামগুলি প্রদর্শন করা হয় যা দেখতে আমার ডিজাইনের মতো বাজে। আমার সত্যিই বোতামগুলির দরকার নেই, কারণ যখনই আপনাকে যাইহোক 6-সংখ্যার মতো কিছু লিখতে হবে তখন সেগুলি অকেজো।

এটি -webkit-appearanceবা অন্য কোনও সিএসএস ট্রিক দিয়ে এটি অক্ষম করা সম্ভব ? অনেক ভাগ্য ছাড়াই চেষ্টা করেছি।

Comments

আপনি যদি type="text"অন্যান্য কারণে ব্যবহার করতে পছন্দ করেন এবং কেবলমাত্র সংখ্যাগত কীবোর্ড বৈশিষ্ট্যটির জন্য সংখ্যায় স্যুইচ করেন তবে আপনি কীবোর্ড বৈশিষ্ট্যটি pattern="[0-9]*"পেতে ব্যবহার করতে পারবেন, আপনাকে ধরে রাখতে পারবেন type="text"। স্ট্যাকওভারফ্লো

— 17১17১৯০৩/২

Answer 1

নীচের সিএসএস ক্রোম এবং ফায়ারফক্স উভয়ের জন্য কাজ করে

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}

Comments

উপরের চেয়ে ভাল সমাধান (আরও সম্পূর্ণ)

— aqm

-moz-চেহারা: পাঠ্যক্ষেত্র; সংযোজন ছিল আমার জন্য একমাত্র উত্তর যা কাজ করেছিল। ধন্যবাদ!

— ন্যানোরিপার

Answer 2

আমি আবিষ্কার করেছি যে এর উত্তরের দ্বিতীয় অংশ রয়েছে।

প্রথম অংশটি আমাকে সহায়তা করেছিল, তবে আমার ডানদিকে এখনও একটি জায়গা ছিলtype=number । আমি ইনপুটটিতে মার্জিনটি শূন্য করে ফেলেছিলাম, তবে স্পষ্টতই স্পিনারের কাছেও আমাকে মার্জিন আউট করতে হয়েছিল।

এটি এটি স্থির করে:

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

Comments

অসাধারণ. আমার একই রকম সমস্যা ছিল , তবে কিছুটা আলাদা সিএসএস কৌশল নিয়ে, যা সম্পূর্ণ নতুন সমস্যার দিকে নিয়ে যায় ...

— লুকাশ এডার

স্ক্রোল আচরণটি ঠিক করার কোনও উপায় কি কেউ জানেন যেখানে আপনি অসীমভাবে নীচে এবং নীচে স্ক্রোল করতে পারেন? আমি আমার ইনপুট উপাদানটিতে min=0.01(এবং maxকিছু নির্বিচার মান) সেট করে রেখেছি, তবে আমি পৃষ্ঠাটি কেবল নীচে এবং নীচে যেতে পছন্দ করব। আমি AngularJS ব্যবহার করছি এবং আমি এটিএম কিছুই খুঁজে পাচ্ছি না।

— জ্যাকএক্সজেড

এই নির্দিষ্ট সমস্যা এবং এই ধরণের তথ্যের জন্য কোনও প্রামাণিক উত্সের সাথে আবার সংযোগ স্থাপন: css-tricks.com/snippets/css/turn-off-number-input-spinners

— জোশ হাবদাস

পরিষ্কার হতে হবে, এটি মাউস স্ক্রোল কার্যকারিতা সরিয়ে দেয় না!

— বাবলু

-মোজ-উপস্থিতি: ফায়ারফক্সের জন্য পাঠ্যক্ষেত্র

— কেভিন

Answer 3

এটি করার সর্বোত্তম উপায় কিনা তা নিশ্চিত নন, তবে এটি স্পিনরা Chrome 8.0.552.5 ডিভাইসে অদৃশ্য হয়ে যায়:

input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

Comments

@ জেথ্রো লারসন এটি কী কাজ করছে না? -webkit-outer-spin-buttonপরিবর্তে আপনি চেষ্টা করতে পারেন ।

— রবার্টক

এটি টাইপ = "তারিখ" এর জন্য দুর্দান্ত কাজ করেছে: ইনপুট [প্রকার = তারিখ] :: - ওয়েবকিট-আউটডোর-স্পিন-বোতাম we-ওয়েবেকিট-উপস্থিতি: কিছুই নয়; }

— uglymunky

Answer 4

স্পিনারদের অপেরা-তে উপস্থিত হওয়া থেকে বিরত রাখা অসম্ভব বলে মনে হচ্ছে। অস্থায়ী কর্মক্ষেত্র হিসাবে, আপনি স্পিনারদের জন্য জায়গা তৈরি করতে পারেন। আমি যতদূর বলতে পারি, নিম্নলিখিত অপশনগুলি কেবল অপেরাতে কেবল পর্যাপ্ত প্যাডিং যুক্ত করেছে:

noindex:-o-prefocus,
input[type=number] {
    padding-right: 1.2em;
}

Comments

@ কুনু প্রকৃতপক্ষে, তবে এটি এখানে উল্লেখ করা দরকার কারণ উত্তরের কোডটি ইনপুটগুলিকে অপেরার জন্য অযোগ্য করে দেয়।

— গলভেন

@ গলভেনচ দয়া করে করবেন না :) আমি এটিকে খুব দরকারী বলে মনে করেছি, অন্য কেউও হতে পারে।

— frnhr

Answer 5

আপনি নিম্নলিখিত কৌশল দ্বারা স্পিনারকে আড়াল করতে পারেন:

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity:0;
  pointer-events:none;
}