Debojyoti-Chakraborty

<div class="custom-name">
  <label class="hosted-field--label" for="cardholder-name" name="cardholderName">
    <span class="icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
    </span>
    Cardholder's Name</label>
    <input type="text" placeholder="e.g. JOHN DOE" class="name-custom-input" [(ngModel)]="cardholdersName" name="cardholderName"/>
</div>

Debojyoti-Chakraborty

.name-custom-input{width: 100%;
    border: 0;
    border-bottom: 1px solid #ccc;
    padding: 8px 0px;
    outline: 0;color:rgba(0, 0, 0, 0.57)}
.name-custom-input:focus{border-bottom: 2px solid $blue;}
.custom-name{height:76px;}

Debojyoti-Chakraborty

import { Component, OnInit } from '@angular/core';
import * as braintree from 'braintree-web';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {