angular - Can i modify Ngx-Mask Special characters? - Stack Overflow

i have an input with ngx-mask with the 0|0|0|0|0|0 and my special character is "|" but isn't large enough in the UI (images on the bottom). There is any option to only make larger the | character?

I tried searching but i didn't find nothing can anyone help?

  <input
          type="text"
          [specialCharacters]="['|']"
          mask="0|0|0|0|0|0"
          [showMaskTyped]="true"
          placeHolderCharacter="0"
          class="autolectura-input form-control"
          required
          id="codigo"
          formControlName="codigo"
        />

i have this
Image 1
and i need this
Image 2

i have an input with ngx-mask with the 0|0|0|0|0|0 and my special character is "|" but isn't large enough in the UI (images on the bottom). There is any option to only make larger the | character?

I tried searching but i didn't find nothing can anyone help?

  <input
          type="text"
          [specialCharacters]="['|']"
          mask="0|0|0|0|0|0"
          [showMaskTyped]="true"
          placeHolderCharacter="0"
          class="autolectura-input form-control"
          required
          id="codigo"
          formControlName="codigo"
        />

i have this
Image 1
and i need this
Image 2

• angular
• typescript
• ngx-mask

Share Improve this question Follow asked Jan 29 at 15:14 IKERAGIIKERAGI 3311 silver badge33 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

You can use a ascii character instead:

If you need alternatives to the ASCII pipe character ("|"), you can use various Unicode box-drawing characters depending on the visual effect you want to achieve, including: Vertical lines:

"║" (Unicode U+2551) - A thicker vertical line
"│" (Unicode U+2502) - A thinner vertical line

HTML:

<input
  type="text"
  [specialCharacters]="['│']"
  style="padding: 5px 20px;
  font-size: 18px;
  letter-spacing: 10px;"
  mask="0│0│0│0│0│0"
  [showMaskTyped]="true"
  placeHolderCharacter="0"
  class="autolectura-input form-control"
  required
  id="codigo"
/>

Stackblitz Demo