CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4
snowflakes74
snowflakes74

Reputation: 1307

Apply custom CSS on bs timepicker

I am using ngx-bootstrap/timpicker component but would like to change its appearance so it can be used on an iPad for my app by increasing the size of input and font size.

I have been able to increase the width and height of the input boxes and chevrons using the following css:

.bs-timepicker-field {
  width: 85px ;
  height: 75px;
  padding: .375rem .55rem;
  font-size: x-large ;
  font-weight: bold;
}

.bs-chevron {
  border-style: solid;
  display: block;
  width: 15px !important;
  height: 15px !important;
  position: relative;
  border-width: 3px 0px 0 3px;
}

but unable to change the size of AM/PM button.

Could someone please let me know how to change the font size of AM/PM text to larger size and a border around the button.

enter image description here

Upvotes: 0

Views: 715

Answers (1)

isherwood
isherwood

Reputation: 61092

In the demo, this increased both the font and button size:

timepicker .btn {
    font-size: 24px;
}

Upvotes: 1

Related Questions