Css plus minus button
A Counter with plus minus buttons for changing Input(Number) field., Tutorials Tutorials Lessons Courses Custom Training , Get Involved Connect Foundation Forum FAQs Contribute Yetinauts Partners Sponsorships ,Install with Foundation CLI
Answer by Michaela Hardy
function wcqib_refresh_quantity_increments() < jQuery("div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)").each(function(a, b) < var c = jQuery(b); c.addClass("buttons_added"), c.children().first().before(''), c.children().last().after('') >) > String.prototype.getDecimals || (String.prototype.getDecimals = function() < var a = this, b = ("" + a).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/); return b ? Math.max(0, (b[1] ? b[1].length : 0) - (b[2] ? +b[2] : 0)) : 0 >), jQuery(document).ready(function() < wcqib_refresh_quantity_increments() >), jQuery(document).on("updated_wc_div", function() < wcqib_refresh_quantity_increments() >), jQuery(document).on("click", ".plus, .minus", function() < var a = jQuery(this).closest(".quantity").find(".qty"), b = parseFloat(a.val()), c = parseFloat(a.attr("max")), d = parseFloat(a.attr("min")), e = a.attr("step"); b && "" !== b && "NaN" !== b || (b = 0), "" !== c && "NaN" !== c || (c = ""), "" !== d && "NaN" !== d || (d = 0), "any" !== e && "" !== e && void 0 !== e && "NaN" !== parseFloat(e) || (e = 1), jQuery(this).is(".plus") ? c && b >= c ? a.val(c) : a.val((b + parseFloat(e)).toFixed(e.getDecimals())) : d && b 0 && a.val((b - parseFloat(e)).toFixed(e.getDecimals())), a.trigger("change") >);function wcqib_refresh_quantity_increments() < jQuery("div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)").each(function(a, b) < var c = jQuery(b); c.addClass("buttons_added"), c.children().first().before(''), c.children().last().after('') >) > String.prototype.getDecimals || (String.prototype.getDecimals = function() < var a = this, b = ("" + a).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/); return b ? Math.max(0, (b[1] ? b[1].length : 0) - (b[2] ? +b[2] : 0)) : 0 >), jQuery(document).ready(function() < wcqib_refresh_quantity_increments() >), jQuery(document).on("updated_wc_div", function() < wcqib_refresh_quantity_increments() >), jQuery(document).on("click", ".plus, .minus", function() < var a = jQuery(this).closest(".quantity").find(".qty"), b = parseFloat(a.val()), c = parseFloat(a.attr("max")), d = parseFloat(a.attr("min")), e = a.attr("step"); b && "" !== b && "NaN" !== b || (b = 0), "" !== c && "NaN" !== c || (c = ""), "" !== d && "NaN" !== d || (d = 0), "any" !== e && "" !== e && void 0 !== e && "NaN" !== parseFloat(e) || (e = 1), jQuery(this).is(".plus") ? c && b >= c ? a.val(c) : a.val((b + parseFloat(e)).toFixed(e.getDecimals())) : d && b 0 && a.val((b - parseFloat(e)).toFixed(e.getDecimals())), a.trigger("change") >);/* -- quantity box -- */ .quantity < display: inline-block; >.quantity .input-text.qty < width: 35px; height: 39px; padding: 0 5px; text-align: center; background-color: transparent; border: 1px solid #efefef; >.quantity.buttons_added < text-align: left; position: relative; white-space: nowrap; vertical-align: top; >.quantity.buttons_added input < display: inline-block; margin: 0; vertical-align: top; box-shadow: none; >.quantity.buttons_added .minus, .quantity.buttons_added .plus < padding: 7px 10px 8px; height: 41px; background-color: #ffffff; border: 1px solid #efefef; cursor:pointer;>.quantity.buttons_added .minus < border-right: 0; >.quantity.buttons_added .plus < border-left: 0; >.quantity.buttons_added .minus:hover, .quantity.buttons_added .plus:hover < background: #eeeeee; >.quantity input::-webkit-outer-spin-button, .quantity input::-webkit-inner-spin-button < -webkit-appearance: none; -moz-appearance: none; margin: 0; >.quantity.buttons_added .minus:focus, .quantity.buttons_added .plus:focus
/* -- quantity box -- */ .quantity < display: inline-block; >.quantity .input-text.qty < width: 35px; height: 39px; padding: 0 5px; text-align: center; background-color: transparent; border: 1px solid #efefef; >.quantity.buttons_added < text-align: left; position: relative; white-space: nowrap; vertical-align: top; >.quantity.buttons_added input < display: inline-block; margin: 0; vertical-align: top; box-shadow: none; >.quantity.buttons_added .minus, .quantity.buttons_added .plus < padding: 7px 10px 8px; height: 41px; background-color: #ffffff; border: 1px solid #efefef; cursor:pointer;>.quantity.buttons_added .minus < border-right: 0; >.quantity.buttons_added .plus < border-left: 0; >.quantity.buttons_added .minus:hover, .quantity.buttons_added .plus:hover < background: #eeeeee; >.quantity input::-webkit-outer-spin-button, .quantity input::-webkit-inner-spin-button < -webkit-appearance: none; -moz-appearance: none; margin: 0; >.quantity.buttons_added .minus:focus, .quantity.buttons_added .plus:focus
Answer by Dillon Kennedy
We will be creating two buttons, one for Increment and another Decrement −,What are increment (++) and decrement (—) operators in C#?,Pre-increment (or pre-decrement) in C,Increment and decrement operators in Java
i have managed to eliminate the arrows that come out by default inside the input to modify the value of the counter, with the following css
input < text-align: center; border: 1px solid #6C757D; >.number-input input[type="number"] < -webkit-appearance: textfield !important; -moz-appearance: textfield !important; appearance: textfield !important; >.number-input input[type=number]::-webkit-inner-spin-button, .number-input input[type=number]::-webkit-outer-spin-button < -webkit-appearance: none; >.number-input
Answer by Hudson Person
In this way, you can use plugins or code snippets based on your requirements to add plus + and minus – buttons to the quantity input in WooCommerce.,You can use a simple code snippet consisting of PHP, JQuery and CSS to add plus (+) and (-) buttons in place of the up and down arrows to increase and decrease the quantity respectively. Start with adding the below PHP & JQuery snippets to the functions.php file of your child theme:,In order to add buttons on the product as well as the Cart page, there are two free plugins available:,You can find this hooks in templates/global
You can use a simple code snippet consisting of PHP, JQuery and CSS to add plus (+) and (-) buttons in place of the up and down arrows to increase and decrease the quantity respectively. Start with adding the below PHP & JQuery snippets to the functions.php file of your child theme:
add_action( 'woocommerce_after_add_to_cart_quantity', 'ts_quantity_plus_sign' ); function ts_quantity_plus_sign() < echo ''; > add_action( 'woocommerce_before_add_to_cart_quantity', 'ts_quantity_minus_sign' ); function ts_quantity_minus_sign() < echo ''; > add_action( 'wp_footer', 'ts_quantity_plus_minus' ); function ts_quantity_plus_minus() < // To run this on the single product page if ( ! is_product() ) return; ?>
You can see that the plus (+) and minus (-) buttons have been added next to the quantity input element. However, we need to add some styles / CSS in order for the buttons to render properly. If you’re using popular themes such as the StoreFront theme, you will have an option to add additional CSS by clicking on Customize on the front-end itself.
.single-product div.product form.cart .quantity
Answer by Marie Haynes
HTML Arrows offers all the html symbol codes you need to simplify your site design. HTML Arrows is shared by Toptal Designers, the marketplace for hiring elite UI, UX, and Visual designers, along with top developer and finance talent. Discover why top companies and start-ups turn to Toptal to hire freelance designers for their mission-critical projects.
UNICODE
Спецсимволы HTML
Таблица спецсимволов HTML, содержит самые популярные символы для верстки и оформления контента веб-страниц.
Чтобы разместить символ на странице, необходимо скопировать код символа и вставить в исходный HTML-код страницы.
Спецсимволы чувствительны к регистру, поэтому их необходимо прописывать точно так, как указано в таблице.
Оформление текста и пунктуация
Код Символ Описание Неразрывный пробел Узкий пробел (длины N) Широкий пробел (длины M) … … Многоточие . . Точка , , Запятая : : Двоеточие ; ; Точка с запятой ! ! Восклицательный знак ? ? Вопросительный знак ¿ ¿ Перевернутый вопросительный знак – Дефис – – Обычное тире (длины N) — — Обычное тире (длины M) @ @ Собачка * * Звездочка # # Решетка ¶ ¶ Абзац § § Параграф ́ ́ Ударение ' ' Апостроф ´ ´ Акут ˆ ˆ Акцент ˜ ˜ Малая тильда / / Символ косой черты (slash) \ \ Обратный слэш (backslash) ⁄ ⁄ Косая дробная черта (деление) ǀ ǀ Вертикальная черта • • Простой маркер · · Средняя точка ○ ○ Круг
Кавычки и скобки
Код Символ Описание " " Двойная кавычка ‘ ‘ Одиночная верхняя левая кавычка ’ ’ Одиночная верхняя правая кавычка ‚ ‚ Одиночная нижняя правая кавычка “ “ Двойная верхняя левая кавычка ” ” Двойная верхняя правая кавычка „ „ Двойная нижняя правая кавычка « « Двойная левая угловая кавычка » » Двойная правая угловая кавычка ( ( Круглая скобка влево ) ) Круглая скобка вправо ⟨ 〈 Угловая скобка влево ⟩ 〉 Угловая скобка вправо &#lsaquo; ‹ Угловая скобка влево, вариант &#rsaquo; › Угловая скобка вправо, вариант [ [ Квадратная скобка влево ] ] Квадратная скобка вправо ❛ ❛ Одиночная английская кавычка открывающая ❜ ❜ Одиночная английская кавычка закрывающая ❝ ❝ Двойная английская кавычка открывающая ❞ ❞ Двойная английская кавычка закрывающая
Математические знаки
Код Символ Описание + + Плюс − − Минус = = Равно × × Умножение ÷ ÷ Деление ± ± Плюс-минус ¹ ¹ Верхний индекс «1» ² ² Верхний индекс «2» ³ ³ Верхний индекс «3» ½ ½ Дробь «одна вторая» ⅓ ⅓ Дробь «одна треть» ¼ ¼ Дробь «одна четвёртая» ¾ ¾ Дробь «три четверти» № № Номер % % Процент ‰ ‰ Промилле ‱ ‱ Знак на десять тысяч µ µ Микро π π Пи ƒ ƒ Функции ∫ ∫ Интеграл ∏ ∏ Произведение ∑ ∑ Суммирование √ √ Радикал ∞ ∞ Бесконечность ∝ ∝ Пропорционально ≅ ≅ Приблизительно равно ≈ ≈ Почти равно ≠ ≠ Не равно ≡ ≡ Идентично ≤ ≤ Меньше или равно ≥ ≥ Больше или равно ∑ ∑ Суммирование
Стрелки и указатели
Код Символ Описание ← ← Стрелка влево ↑ ↑ Стрелка вверх → → Стрелка вправо ↓ ↓ Стрелка вниз ↔ ↔ Стрелка влево-вправо ⇆ ⇆ Стрелка влево-вправо ⇐ ⇐ Двойная стрелка влево ⇑ ⇑ Двойная стрелка вверх ⇒ ⇒ Двойная стрелка вправо ⇓ ⇓ Двойная стрелка вниз ⇔ ⇔ Двойная стрелка влево-вправо ⇕ ⇕ Двойная стрелка вверх и вниз ⇧ ⇧ Толстая полая стрелка вверх ⬇ ⬇ Закрашенная стрелка вниз ⬆ ⬆ Закрашенная стрелка вверх ➥ ➥ Изогнутая стрела, указывающая вниз и вправо ➦ ➦ Изогнутая стрела, указывающая вверх и вправо ↺ ↺ Круглая стрелка с наконечником против часовой стрелки ↻ ↻ Круглая стрелка с наконечником против часовой стрелки ↵ ↵ Возврат каретки ↩ ↩ Стрелка налево с крючком ▲ ▲ Треугольная стрелка вверх ▼ ▼ Треугольная стрелка вниз ► ► Треугольная стрелка вправо ◄ ◄ Треугольная стрелка влево ☚ ☚ Указательный палец закрашенный влево ☛ ☛ Указательный палец закрашенный вправо ☜ ☜ Указательный палец прозрачный влево ☝ ☝ Указательный палец прозрачный вверх ☞ ☞ Указательный палец прозрачный вправо ☟ ☟ Указательный палец прозрачный вниз ˂ ˂ Направление влево ˃ ˃ Направление вправо ˄ ˄ Направление прямо ˅ ˅ Направление назад