52 views

Verhogingspijlen aanpassen bij invoer van typenummer met CSS

Hosted by Code Expert
html

Ik heb een typenummer ingevoerd dat wordt weergegeven met de volgende code:

<input class="quantity" id="id_form-0-quantity" min="0" name="form-0-quantity" value="1" type="number">

Het ziet er zo uit:

voer hier de afbeeldingsbeschrijving in

Ik zou er zoiets als dit van willen maken:

voer hier de afbeeldingsbeschrijving in

De tweede weergave wordt nagebootst met twee aparte knoppen.

Hoe kan ik de pijlen stylen zoals beschreven?

Antwoord 1, autoriteit 100%

tl;dr:

Na een paar keer privé gevraagd te zijn naar de volgende setup, besloot ik er een demo voor toe te voegen (Bootstrap 4 + jQuery + Font Awesome setup voor de invoergroep):

Codefragment weergeven

Antwoord 2, autoriteit 6%

Nummerinvoer kan op deze manier worden gestileerd met het volgende script dat ik onlangs heb gevonden:

Demo.

Dit script is een superlichtgewicht (1,49 kb ongecomprimeerd, 0,71 kb gecomprimeerd, 0,35 kb gzipped), bruikbare en betrouwbare hoeveelheidsinvoer die de vreselijke, onhandige kleine invoerknoppen vervangt die zijn ingebouwd in de nummerinvoer in de browser. Het is geschreven met ES6-modules, dus het moet worden getranspileerd voor oudere browsers.

De repository van de auteur is hier.
Ik hoop dat dit helpt 😉

Bewerken:
Als u de pijltoetsen omhoog/omlaag wilt hebben in plaats van plus/minus, is er ook een andere jQuery- gebaseerde oplossing.

Nummerinvoer met pijlen omhoog/omlaag

$(document).ready(function () {
  jQuery('<div class="quantity-nav"><button class="quantity-button quantity-up">&#xf106;</button><button class="quantity-button quantity-down">&#xf107</button></div>').insertAfter('.quantity input');
  jQuery('.quantity').each(function () {
    var spinner = jQuery(this),
        input = spinner.find('input[type="number"]'),
        btnUp = spinner.find('.quantity-up'),
        btnDown = spinner.find('.quantity-down'),
        min = input.attr('min'),
        max = input.attr('max');
    btnUp.click(function () {
      var oldValue = parseFloat(input.val());
      if (oldValue >= max) {
        var newVal = oldValue;
      } else {
        var newVal = oldValue + 1;
      }
      spinner.find("input").val(newVal);
      spinner.find("input").trigger("change");
    });
    btnDown.click(function () {
      var oldValue = parseFloat(input.val());
      if (oldValue <= min) {
        var newVal = oldValue;
      } else {
        var newVal = oldValue - 1;
      }
      spinner.find("input").val(newVal);
      spinner.find("input").trigger("change");
    });
  });
});
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  min-width: 100vw;
  background: #34495E;
  font-size: 1rem;
}
.quantity {
  position: relative;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}
.quantity input {
  width: 45px;
  height: 42px;
  line-height: 1.65;
  float: left;
  display: block;
  padding: 0;
  margin: 0;
  padding-left: 20px;
  border: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
  font-size: 1rem;
  border-radius: 4px;
}
.quantity input:focus {
  outline: 0;
}
.quantity-nav {
  float: left;
  position: relative;
  height: 42px;
}
.quantity-button {
  position: relative;
  cursor: pointer;
  border: none;
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  width: 21px;
  text-align: center;
  color: #333;
  font-size: 13px;
  font-family: "FontAwesome" !important;
  line-height: 1.5;
  padding: 0;
  background: #FAFAFA;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.quantity-button:active {
  background: #EAEAEA;
}
.quantity-button.quantity-up {
  position: absolute;
  height: 50%;
  top: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-family: "FontAwesome";
  border-radius: 0 4px 0 0;
  line-height: 1.6
}
.quantity-button.quantity-down {
  position: absolute;
  bottom: 0;
  height: 50%;
  font-family: "FontAwesome";
  border-radius: 0 0 4px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="quantity">
  <input type="number" min="1" max="9" step="1" value="1">
</div>

Snippet uitvouwen

Antwoord 3, autoriteit 3%

Hier is een andere versie, gebaseerd op het antwoord van @tao, met font-awesome:

input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
.number-input {
  border: 2px solid #ddd;
  display: inline-flex;
}
.number-input,
.number-input * {
  box-sizing: border-box;
}
.number-input button {
  outline:none;
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  margin: 0;
  position: relative;
}
.number-input button:after {
  display: inline-block;
  position: absolute;
  font-family: "Font Awesome 5 Free"; 
  font-weight: 900;
  content: '\f077';
  transform: translate(-50%, -50%) rotate(180deg);
}
.number-input button.plus:after {
  transform: translate(-50%, -50%) rotate(0deg);
}
.number-input input[type=number] {
  font-family: sans-serif;
  max-width: 5rem;
  padding: .5rem;
  border: solid #ddd;
  border-width: 0 2px;
  font-size: 2rem;
  height: 3rem;
  font-weight: bold;
  text-align: center;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<div class="number-input">
  <button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" class="minus"></button>
  <input class="quantity" min="0" name="quantity" value="1" type="number">
  <button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus"></button>
</div>

Snippet uitvouwen

Antwoord 4, autoriteit 2%

Ik heb een mooie oplossing gevonden. Draai gewoon de pijltjestoetsen en zet de dekking op 0. (ze staan ​​nu op de juiste plaats, onzichtbaar maar klikbaar) Zet ​​dan een :after en :before element over deze onzichtbare knoppen. Deze elementen kunnen vervolgens naar wens worden gestyled.

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  transform: rotate(90deg);
  height: 80px;
  opacity: 0;
}
.quantity-wrapper {
  position: relative;
}
.quantity-wrapper:after {
  content: "+";
  position: absolute;
  right: 5px;
  height: 100%;
  top: 8px;
  pointer-events: none;
}
.quantity-wrapper:before {
  content: "-";
  position: absolute;
  left: 5px;
  height: 100%;
  top: 8px;
}
<div class="quantity-wrapper">
  <input class="quantity" id="id_form-0-quantity" min="0" name="form-0-quantity" value="1" type="number">
</div>

Snippet uitvouwen

Antwoord 5

Je kunt het eerste ontwerp gemakkelijk converteren naar het tweede, zoals dit:

HTML

<div class="quantity">
    <button class="btn minus1">-</button>
    <input class="quantity" id="id_form-0-quantity" min="0" name="form-0-quantity" value="1" type="number">
    <button class="btn add1">+</button>

CSS

.quantity{
   display:flex;
   width:160px;
}
/* it will support chrome and firefox */
.quantity input[type=number]::-webkit-inner-spin-button,
.quantity input[type=number]::-webkit-outer-spin-button{
   -webkit-appearance:none;
}
.quantity input,.quantity button{
   width:50px;
   padding:.5em;
   font-size:1.2rem;
   text-align:center;
   font-weight:900;
   background:white;
   border:1px solid #aaa;
}
.quantity input{
   border-left:none;
   border-right:none;
}

Antwoord 6

Deze code kan u helpen .kan worden gevonden [hier ook](Detecteren nummerinvoer spinner klik

$.fn.spinInput = function (options) {
    var settings = $.extend({
        maximum: 1000,
        minimum: 0,
        value: 1,
        onChange: null
    }, options);
    return this.each(function (index, item) {
        var min = $(item).find('>*:first-child').first();
        var max = $(item).find('>*:last-child').first();
        var v_span = $(item).find('>*:nth-child(2)').find('span');
        var v_input = $(item).find('>*:nth-child(2)').find('input');
        var value = settings.value;
        $(v_input).val(value);
        $(v_span).text(value);
        async function increment() {
            value = Number.parseInt($(v_input).val());
            if ((value - 1) > settings.maximum) return;
            value++;
            $(v_input).val(value);
            $(v_span).text(value);
            if (settings.onChange) settings.onChange(value);
        }
        async function desincrement() {
            value = Number.parseInt($(v_input).val());
            if ((value - 1) < settings.minimum) return;
            value--
            $(v_input).val(value);
            $(v_span).text(value);
            if (settings.onChange) settings.onChange(value);
        }
        var pressTimer;
        function actionHandler(btn, fct, time = 100, ...args) {
            function longHandler() {
                pressTimer = window.setTimeout(function () {
                    fct(...args);
                    clearTimeout(pressTimer);
                    longHandler()
                }, time);
            }
            $(btn).mouseup(function () {
                clearTimeout(pressTimer);
            }).mousedown(function () {
                longHandler();
            });
            $(btn).click(function () {
                fct(...args);
            });
        }
        actionHandler(min, desincrement, 100);
        actionHandler(max, increment, 100)
    })
}
$('body').ready(function () {
    $('.spin-input').spinInput({ value: 1, minimum: 1 });
});
:root {
    --primary-dark-color: #F3283C;
    --primary-light-color: #FF6978;
    --success-dark-color: #32A071;
    --sucess-light-color: #06E775;
    --alert-light-color: #a42a23;
    --alert-dark-color: #7a1f1a;
    --secondary-dark-color: #666666;
    --secondary-light-color: #A6A6A6;
    --gold-dark-color: #FFA500;
    --gold-light-color: #FFBD00;
    --default-dark-color: #1E2C31;
    --default-light-color: #E5E5E5;
}
.fx-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.fx-colum {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.fx-colum.nowrap,
.fx-row.nowrap {
    flex-wrap: nowrap;
}
.fx-row.fx-fill>*,
.fx-colum.fx-fill>* {
    flex-grow: 1;
}
.spin-input {
    border: 1px solid var(--secondary-light-color);
}
.spin-input>div:first-child {
    cursor: pointer;
    border-right: 1px solid var(--secondary-light-color);
}
.spin-input>div:first-child:active {
    transform: translate3d(1px, 0px, 1px)
}
.spin-input>div:last-child {
    flex: none;
    border-left: 1px solid var(--secondary-light-color);
    cursor: pointer;
}
.spin-input>div:last-child:active {
    transform: translate3d(1px, 0px, 1px)
}
.icon {
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    padding: 12px;
    font-size: 28px;
}
.icon.primary,
.icon.primary .ci {
    color: var(--primary-dark-color);
}
.icon.reactive:hover .ci {
    color: var(--primary-light-color);
}
.hidden {
    display: none;
}
<script src="https://releases.jquery.com/git/jquery-3.x-git.min.js"></script>
<div class="spin-input nowrap fx-row fx-fill" >
                        <div class="icon reactive">
                            <span class="ci ci-minus">-</span>
                        </div>
                        <div class="icon">
                            <span>0</span>
                            <input type="text" class="hidden" value="0">
                        </div>
                        <div class="icon reactive">
                            <span class="ci ci-plus">+</span>
                        </div>
                    </div>

Snippet uitvouwen

Previous articleUpdate .NET-webservice om TLS 1.2 te gebruiken
Next articleWat is het verschil tussen => , ()=> en Unit=>

Other episodes

Invoertype=wachtwoord, laat de browser het wachtwoord niet onthouden

html Code Expert - 0
Ik herinner me dat ik een manier heb gezien om een ​​<input type="password" />te hebben, zodat de browser nietde gebruiker vraagt ​​om het wachtwoord...
Read more

VueJS/browser caching productie builds

html Code Expert - 0
Ik heb een VueJS-app. Telkens wanneer ik npm run builduitvoer, wordt er een nieuwe set dist/*-bestanden gemaakt, echter wanneer ik ze op de server...
Read more

Angular 4 img src is niet gevonden

html Code Expert - 0
Ik heb een probleem met het vinden van een afbeelding met hoek 4. Hij blijft me vertellen dat de afbeelding niet is gevonden. Mapstructuur: app_folder/ app_component/ ...
Read more

HTML-tags binnen <label>

html Code Expert - 0
Ik heb een tabel op een pagina die bestaat uit selectievakjes in de cellen aan de linkerkant en beschrijvingen in de cellen aan de...
Read more

Items die alle kolommen/rijen beslaan met behulp van CSS-rasterlay-out

html Code Expert - 0
Nu de CSS-rasterlay-outmodule binnenkort in Firefox en Chrome wordt geleverd, dacht ik dat ik zou proberen te begrijpen hoe ik het moet gebruiken. Ik heb...
Read more

Angular 2 Hash (#) van de URL verwijderen

html Code Expert - 0
Ik probeer het #-teken van de url in Angular 2 te verwijderen, maar ik kon geen goede uitleg vinden over hoe ik het kan...
Read more

Checkboxes in webpagina’s – hoe maak je ze groter?

html Code Expert - 0
De standaard selectievakjes die in de meeste browsers worden weergegeven, zijn vrij klein en worden niet groter, zelfs niet wanneer een groter lettertype wordt...
Read more

© Copyright - Code Expert 2021