İnput number castomization of the shooter



  • I want to make shooters up and down red without a background. And the thickness of the cs without any pictures.

    Why is it just the top shooter? Help me fix this for earlier thanks.

    input[type=number] {
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        padding: 0 8px;
    }
    input[type=number]::-webkit-inner-spin-button { 
        -webkit-appearance: none;
      opacity:1;
        cursor:pointer;
        display:block;
        width:8px;
        color: #333;
        text-align:center;
        position:relative;
    }
    

    input[type=number]::-webkit-inner-spin-button {
    width: 0;
    height: 0;
    display:block;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid red;
    }

    input[type=number]::-webkit-outer-spin-button
    {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid red;
    }

    <input type="number" value="0" >



  • Option

    input[type=number] {
      height: 30px;
      line-height: 30px;
      font-size: 16px;
      padding: 0 8px;
    }
    input[type=number]::-webkit-inner-spin-button {
      -webkit-appearance: none;
      opacity: 1;
      cursor: pointer;
      display: block;
      width: 8px;
      color: #333;
      text-align: center;
      position: relative;  
    }
    

    .field-number{
    position: relative;
    display: inline-block;
    }
    .field-number:before,
    .field-number:after{
    content: '';
    position: absolute; right: 10px;
    width: 0;
    height: 0;
    display: block;
    border-style: solid;
    pointer-events: none;
    }
    .field-number:before{
    top: 7px;
    border-width: 0 8px 8px 8px;
    border-color: transparent transparent #f00 transparent;
    }
    .field-number:after{
    bottom: 7px;
    border-width: 8px 8px 0 8px;
    border-color: #f00 transparent transparent transparent;
    }

    <div class="field-number">
    <input type="number" value="0">
    </div>


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2