ইনপুট নম্বরে স্পিনার লুকান - ফায়ারফক্স ২৯

Question

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

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

সিএসএস বা jQuery দিয়ে এটি অক্ষম করা সম্ভব?

Comments

আপনি যদি স্পিন তীরগুলি না চান তবে ব্যবহার করবেন না type="number"। আপনি এটি ব্যবহার করতে পারেন type="text"এবং patternএটি একটি সংখ্যা বলে তা নিশ্চিত করার জন্য একটি রেগেক্স সেট করতে বৈশিষ্ট্যটি ব্যবহার করতে পারেন ।

— রকেট হাজমত

-webkit- অভ্যন্তর-স্পিন-বোতাম-ওয়েবেকিট-বহিরাগত-স্পিন-বোতাম-ওয়েবেকিট-উপস্থিতি: কিছুই নয়; মার্জিন: 0; ফায়ারফক্সে কাজ করবেন না।

— নেরিউ জুনিয়র

@ রকেটহাজম্যাট: type="number"পূর্ণ কীবোর্ডের পরিবর্তে সংখ্যাযুক্ত কীবোর্ডটি দেখানোর জন্য মোবাইল ব্রাউজারগুলির জন্য প্রয়োজনীয়।

— কোডম্যানএক্স

<input type="tel">এটি কেবল সংখ্যা এবং এটি স্পিনারদের অন্তর্ভুক্ত করে না।

— টমাসভিরাস

পরিবর্তন type="text"করা একটি খারাপ ধারণা কারণ স্পর্শ ডিভাইসগুলি ভুল কীবোর্ডটি দেখায়।

— নটহাগো

Answer 1

মতে এই ব্লগ পোস্টে , আপনি সেট প্রয়োজন -moz-appearance:textfield;উপর input।

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;
}

<input type="number" step="0.01"/>

Comments

আমি @-moz-document url-prefix() { ... }এটিকে আবদ্ধ করেছিলাম এবং এটি আমার যা ইচ্ছা তা তাই করে: ফায়ারফক্সের স্পিনাররা তাদের লুকিয়ে রাখে, যেখানে তারা খারাপ দেখায়, তবে অন্যান্য ব্রাউজারগুলিতে এগুলিকে বাঁচিয়ে রাখে, ওপি উল্লিখিত হিসাবে সংখ্যাসূচক কীবোর্ড নিয়ে আসে including

— মাইকেল শ্যাপার

জিওফ গ্রাহামের আরও কিছু দরকারী তথ্য:

— সংখ্যার

এটি কাজ করে এবং প্রকৃতপক্ষে এটি স্পিনারদের সরিয়ে দেয়, তবে তারপরে আপনি এখন এটিতে বর্ণমালা অক্ষর প্রবেশ করতে সক্ষম হবেন। আশা করি কেউ যদি প্রবেশের কীগুলি সংখ্যা হয় বা না হয় তবে তা পরীক্ষা না করেই সেই দৃশ্যটি পরিচালনা করার কোনও উপায় খুঁজে পেয়েছেন।

— জোভান্নি জি

@ জোভাননিগ: আপনি স্পিনারদের অপসারণ না করলেও আপনি ফায়ারফক্সের ইনপুটটিতে অ-সংখ্যাসূচক অক্ষর প্রবেশ করতে পারেন। MDN এ ডেমো দিয়ে এটি ব্যবহার করে দেখুন । ক্রোম উভয় উদাহরণে অ-সংখ্যাসূচক ইনপুট প্রতিরোধ করে।

— রিচার্ড ডেমিং

@ অ্যালেক্সেন্ডার: এছাড়াও, আমি Chrome 66 এ কেবল "রান কোড স্নিপেট" চেষ্টা করেছি এবং এটি প্রত্যাশার মতো কাজ করে।

— রিচার্ড ডেমিং

Answer 2

এটি উল্লেখ করার মতো যে -moz-appearanceএই উপাদানগুলির ডিফল্ট মান number-inputফায়ারফক্সে রয়েছে।

আপনি যদি স্পিনারটিকে ডিফল্টরূপে আড়াল -moz-appearance: textfieldকরতে চান তবে আপনি প্রাথমিকভাবে সেট করতে পারেন এবং আপনি যদি স্পিনারটিকে :hover/ এ প্রদর্শিত হতে চান তবে আপনি :focusআগের স্টাইলিংটি ওভাররাইট করতে পারেন -moz-appearance: number-input।

input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input;
}

<input type="number"/>

আমি ভেবেছিলাম যে ক্রোম / এফএফের মধ্যে সামঞ্জস্যতা উন্নত করার জন্য সম্প্রতি সম্প্রতি আমার এই কাজটি করা উচিত কারণ কেউ ক্রমবর্ধমান হতে পারে (যেহেতু ক্রোমে ডিফল্টরূপে সংখ্যার ইনপুটগুলি এইভাবে আচরণ করে)।

আপনি যদি এর জন্য উপলব্ধ সমস্ত মান দেখতে চান তবে আপনি -moz-appearanceসেগুলি এখানে পাবেন (এমডিএন)।

Answer 3

ইন SASS/ SCSSশৈলীতে, আপনি এটি লিখতে পারেন:

input[type='number'] {
  -moz-appearance: textfield;/*For FireFox*/

  &::-webkit-inner-spin-button { /*For Webkits like Chrome and Safari*/
    -webkit-appearance: none;
    margin: 0;
  }
}

অবশ্যই এই কোড শৈলীটি ব্যবহার করতে পারে PostCSS।

Answer 4

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


/* for mozilla */  
   input[type=number] {-moz-appearance: textfield;}

Comments

উপরের সিএসএস কোড html <ইনপুট টাইপ = "সংখ্যা"> স্পিনার

— নবীন প্রকাশ 10

Answer 5

ফায়ারফক্সের আপডেটের পরে 29.0.1 এ একই সমস্যার মুখোমুখি হয়েছিল, এটি এখানেও তালিকাভুক্ত করা হয়েছে https://bugzilla.mozilla.org/show_bug.cgi?id=947728

সমাধান: তারা (মজিলা ছেলেরা) "-মজ-উপস্থিতি" এর জন্য সমর্থন প্রবর্তন করে এটি ঠিক করেছে <input type="number">। আপনার ইনপুট ক্ষেত্রে " -moz-appearance:textfield;" এর সাথে কেবল একটি স্টাইল যুক্ত হওয়া দরকার associated

আমি সিএসএস উপায় পছন্দ করি যেমন: -

.input-mini{
-moz-appearance:textfield;}

অথবা

আপনি এটি ইনলাইনও করতে পারেন:

<input type="number" style="-moz-appearance: textfield">

Answer 6

আমি উপরের উত্তরগুলি থেকে এবং কীভাবে এসএসএস- এ অপেরাতে ইনপুট [টাইপ = "সংখ্যা"] থেকে তীরগুলি সরিয়ে ফেলতে পারি তার থেকে কয়েকটি উত্তর মিশ্রিত করেছি:

input[type=number] {
  &,
  &::-webkit-inner-spin-button,
  &::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: none;

    &:hover,
    &:focus {
      -moz-appearance: number-input;
    }
  }
}

Tested on chrome, firefox, safari

Answer 7

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

    input[type='number'] {
    appearance: none;
}

ফায়ারফক্স, সাফারি, ক্রোমে সমাধান করা। এছাড়াও, -moz-appearance: textfield;আর সমর্থিত নয় ( https://developer.mozilla.org/en-US/docs/Web/CSS/appearance )