{"id":1312,"date":"2021-04-18T10:40:43","date_gmt":"2021-04-18T05:10:43","guid":{"rendered":"https:\/\/myfreeonlinetools.com\/blog\/?p=1312"},"modified":"2021-04-18T10:47:08","modified_gmt":"2021-04-18T05:17:08","slug":"how-to-remove-increase-and-decrease-number-arrow-when-use-input-type-number-in-form","status":"publish","type":"post","link":"https:\/\/myfreeonlinetools.com\/blog\/how-to-remove-increase-and-decrease-number-arrow-when-use-input-type-number-in-form\/","title":{"rendered":"how to remove increase and decrease number arrow when use input type number in form"},"content":{"rendered":"<h2>Remove arrow when using input number.<\/h2>\n<p>Facing problem with increase and decrease number arrow when using input type number in form or Ajax request fields.<\/p>\n<p>Use Below CSS Code<\/p>\n<pre>input[type=\"number\"]::-webkit-outer-spin-button, input[type=\"number\"]::-webkit-inner-spin-button{\r\n            -webkit-appearance: none; \r\n            margin: 0; \r\n        }\r\n\r\nExplain in the example below with the CodePen link.<\/pre>\n<p><a href=\"https:\/\/codepen.io\/rajvinder-singh\/pen\/jOypdqB\">https:\/\/codepen.io\/rajvinder-singh\/pen\/jOypdqB<\/a><\/p>\n<h3>Full Code Below<\/h3>\n<h4>HTML<\/h4>\n<pre> &lt;div class=\"container\"&gt;\r\n&lt;h2&gt;Verify Your Account&lt;\/h2&gt;\r\n&lt;p&gt;We emaield you the six digit code to your email id. &lt;\/p&gt;\r\n&lt;p&gt;Enter the code below to confirm your email address &lt;\/p&gt;\r\n\r\n&lt;div class=\"code-container\"&gt;\r\n&lt;input type=\"number\" class=\"code\" placeholder=\"0\" min=\"0\" max=\"9\" required&gt;\r\n&lt;input type=\"number\" class=\"code\" placeholder=\"0\" min=\"0\" max=\"9\" required&gt;\r\n&lt;input type=\"number\" class=\"code\" placeholder=\"0\" min=\"0\" max=\"9\" required&gt;\r\n&lt;input type=\"number\" class=\"code\" placeholder=\"0\" min=\"0\" max=\"9\" required&gt;\r\n&lt;input type=\"number\" class=\"code\" placeholder=\"0\" min=\"0\" max=\"9\" required&gt;\r\n&lt;input type=\"number\" class=\"code\" placeholder=\"0\" min=\"0\" max=\"9\" required&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;\/div&gt;<\/pre>\n<h4>CSS<\/h4>\n<pre>&lt;style type=\"text\/css\"&gt;\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins&amp;display=swap');\r\n*{ box-sizing: border-box; }\r\nbody{ font-family: 'Poppins'; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; }\r\n.container{ background-color: #FFF; border: 3px #000 solid ; border-radius: 10px; padding: 30px 80px; max-width: 1000px; text-align: center; text-align: center; }\r\n.code-container{ display: flex; justify-content: center; align-content: center; margin: 40px 0; }\r\n.code{ border-radius: 5px; font-size: 75px; height: 120px; text-align: center; width: 100px; border: 1px solid #eee; margin: 1%; }\r\n\r\n.code::-webkit-outer-spin-button, .code::-webkit-inner-spin-button{\r\n-webkit-appearance: none; \r\nmargin: 0; \r\n}\r\n&lt;\/style&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Remove arrow when using input number. Facing problem with increase and decrease number arrow when using input type number in form or Ajax request fields. Use Below CSS Code input[type=&#8221;number&#8221;]::-webkit-outer-spin-button, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[22,31],"tags":[],"class_list":["post-1312","post","type-post","status-publish","format-standard","hentry","category-css-tutorial","category-html"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>how to remove increase and decrease number arrow when use input type number in form - MyFreeOnlineTools<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/myfreeonlinetools.com\/blog\/how-to-remove-increase-and-decrease-number-arrow-when-use-input-type-number-in-form\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"how to remove increase and decrease number arrow when use input type number in form - MyFreeOnlineTools\" \/>\n<meta property=\"og:description\" content=\"Remove arrow when using input number. Facing problem with increase and decrease number arrow when using input type number in form or Ajax request fields. Use Below CSS Code input[type=&quot;number&quot;]::-webkit-outer-spin-button, [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/myfreeonlinetools.com\/blog\/how-to-remove-increase-and-decrease-number-arrow-when-use-input-type-number-in-form\/\" \/>\n<meta property=\"og:site_name\" content=\"MyFreeOnlineTools\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/LearnSchoolOnline\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-04-18T05:10:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-04-18T05:17:08+00:00\" \/>\n<meta name=\"author\" content=\"myfreeonlinetools\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"myfreeonlinetools\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/how-to-remove-increase-and-decrease-number-arrow-when-use-input-type-number-in-form\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/how-to-remove-increase-and-decrease-number-arrow-when-use-input-type-number-in-form\/\"},\"author\":{\"name\":\"myfreeonlinetools\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c\"},\"headline\":\"how to remove increase and decrease number arrow when use input type number in form\",\"datePublished\":\"2021-04-18T05:10:43+00:00\",\"dateModified\":\"2021-04-18T05:17:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/how-to-remove-increase-and-decrease-number-arrow-when-use-input-type-number-in-form\/\"},\"wordCount\":60,\"publisher\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\"},\"articleSection\":[\"CSS Tutorial\",\"HTML\"],\"inLanguage\":\"en\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/how-to-remove-increase-and-decrease-number-arrow-when-use-input-type-number-in-form\/\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/how-to-remove-increase-and-decrease-number-arrow-when-use-input-type-number-in-form\/\",\"name\":\"how to remove increase and decrease number arrow when use input type number in form - MyFreeOnlineTools\",\"isPartOf\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#website\"},\"datePublished\":\"2021-04-18T05:10:43+00:00\",\"dateModified\":\"2021-04-18T05:17:08+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/how-to-remove-increase-and-decrease-number-arrow-when-use-input-type-number-in-form\/#breadcrumb\"},\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/myfreeonlinetools.com\/blog\/how-to-remove-increase-and-decrease-number-arrow-when-use-input-type-number-in-form\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/how-to-remove-increase-and-decrease-number-arrow-when-use-input-type-number-in-form\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/myfreeonlinetools.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"how to remove increase and decrease number arrow when use input type number in form\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#website\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/\",\"name\":\"MyFreeOnlineTools\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/myfreeonlinetools.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\",\"name\":\"MyFreeOnlineTools\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png\",\"contentUrl\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png\",\"width\":387,\"height\":79,\"caption\":\"MyFreeOnlineTools\"},\"image\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c\",\"name\":\"myfreeonlinetools\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g\",\"caption\":\"myfreeonlinetools\"},\"description\":\"Live in Delhi, Working in Gurgaon as Web Designer and Graphic Designer. Developed and Design myfreeonlinetools for online free tools. Also having youtube channel Name with LearnSchoolOnline. Traveling, watching movies, coding are the hobbies.\",\"sameAs\":[\"https:\/\/myfreeonlinetools.com\/\",\"https:\/\/www.facebook.com\/LearnSchoolOnline\/\",\"https:\/\/www.youtube.com\/learnschoolonline\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"how to remove increase and decrease number arrow when use input type number in form - MyFreeOnlineTools","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/myfreeonlinetools.com\/blog\/how-to-remove-increase-and-decrease-number-arrow-when-use-input-type-number-in-form\/","og_locale":"en_US","og_type":"article","og_title":"how to remove increase and decrease number arrow when use input type number in form - MyFreeOnlineTools","og_description":"Remove arrow when using input number. Facing problem with increase and decrease number arrow when using input type number in form or Ajax request fields. Use Below CSS Code input[type=\"number\"]::-webkit-outer-spin-button, [&hellip;]","og_url":"https:\/\/myfreeonlinetools.com\/blog\/how-to-remove-increase-and-decrease-number-arrow-when-use-input-type-number-in-form\/","og_site_name":"MyFreeOnlineTools","article_author":"https:\/\/www.facebook.com\/LearnSchoolOnline\/","article_published_time":"2021-04-18T05:10:43+00:00","article_modified_time":"2021-04-18T05:17:08+00:00","author":"myfreeonlinetools","twitter_card":"summary_large_image","twitter_misc":{"Written by":"myfreeonlinetools","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/myfreeonlinetools.com\/blog\/how-to-remove-increase-and-decrease-number-arrow-when-use-input-type-number-in-form\/#article","isPartOf":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/how-to-remove-increase-and-decrease-number-arrow-when-use-input-type-number-in-form\/"},"author":{"name":"myfreeonlinetools","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c"},"headline":"how to remove increase and decrease number arrow when use input type number in form","datePublished":"2021-04-18T05:10:43+00:00","dateModified":"2021-04-18T05:17:08+00:00","mainEntityOfPage":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/how-to-remove-increase-and-decrease-number-arrow-when-use-input-type-number-in-form\/"},"wordCount":60,"publisher":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization"},"articleSection":["CSS Tutorial","HTML"],"inLanguage":"en"},{"@type":"WebPage","@id":"https:\/\/myfreeonlinetools.com\/blog\/how-to-remove-increase-and-decrease-number-arrow-when-use-input-type-number-in-form\/","url":"https:\/\/myfreeonlinetools.com\/blog\/how-to-remove-increase-and-decrease-number-arrow-when-use-input-type-number-in-form\/","name":"how to remove increase and decrease number arrow when use input type number in form - MyFreeOnlineTools","isPartOf":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#website"},"datePublished":"2021-04-18T05:10:43+00:00","dateModified":"2021-04-18T05:17:08+00:00","breadcrumb":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/how-to-remove-increase-and-decrease-number-arrow-when-use-input-type-number-in-form\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/myfreeonlinetools.com\/blog\/how-to-remove-increase-and-decrease-number-arrow-when-use-input-type-number-in-form\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/myfreeonlinetools.com\/blog\/how-to-remove-increase-and-decrease-number-arrow-when-use-input-type-number-in-form\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/myfreeonlinetools.com\/blog\/"},{"@type":"ListItem","position":2,"name":"how to remove increase and decrease number arrow when use input type number in form"}]},{"@type":"WebSite","@id":"https:\/\/myfreeonlinetools.com\/blog\/#website","url":"https:\/\/myfreeonlinetools.com\/blog\/","name":"MyFreeOnlineTools","description":"","publisher":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/myfreeonlinetools.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en"},{"@type":"Organization","@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization","name":"MyFreeOnlineTools","url":"https:\/\/myfreeonlinetools.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png","contentUrl":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png","width":387,"height":79,"caption":"MyFreeOnlineTools"},"image":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c","name":"myfreeonlinetools","image":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g","caption":"myfreeonlinetools"},"description":"Live in Delhi, Working in Gurgaon as Web Designer and Graphic Designer. Developed and Design myfreeonlinetools for online free tools. Also having youtube channel Name with LearnSchoolOnline. Traveling, watching movies, coding are the hobbies.","sameAs":["https:\/\/myfreeonlinetools.com\/","https:\/\/www.facebook.com\/LearnSchoolOnline\/","https:\/\/www.youtube.com\/learnschoolonline"]}]}},"_links":{"self":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts\/1312","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/comments?post=1312"}],"version-history":[{"count":0,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts\/1312\/revisions"}],"wp:attachment":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/media?parent=1312"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/categories?post=1312"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/tags?post=1312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}