Question 263109 in Html Question posted in
Some basic documentation can be found here.

Html – Can I make an ALL UPPER CASED string in a button Proper Cased

I really would like SEARCH to become Search and CLEAR ALL to become Clear All

This CSS doesn’t work (grabbed it from CSS text-transform capitalize on all caps).

.common-search-footer {
  display: flex;
  background: #ededed;
  font-size: small;
  color: rgba(0, 0, 0, 0.87);
  justify-content: flex-end;
  width: 100%;
  text-transform: lowercase;
}

.common-search-footer,
.common-search-footer:first-line {
  text-transform: uppercase;
}
<mat-card-footer class="common-search-footer">
  <button mat-button type="submit" id="searchButton">
          <i class="fa fa-search" aria-hidden="true"></i> SEARCH</button>
  <button mat-button class="red" type="button" id="clearButton">
          <i class="fa fa-times"></i> CLEAR ALL</button>
</mat-card-footer>
Tags:

2

Answers


  1. 0

    You’ll need to set the text-transform to the <button> itself:

    .common-search-footer {
    display: flex;
    background: #ededed;
    font-size: small;
    color: rgba(0, 0, 0, 0.87); 
    width: 100%;
}

.common-search-footer > button {
    text-transform: lowercase;
}

.common-search-footer > button:first-line {
    text-transform: capitalize;
}
    <mat-card-footer class="common-search-footer">
  <button mat-button type="submit" id="searchButton">
    <i class="fa fa-search" aria-hidden="true"></i> SEARCH</button>
  <button mat-button class="red" type="button" id="clearButton">
    <i class="fa fa-times"></i> CLEAR ALL</button>
</mat-card-footer>

    Note that due to :first-line, this will only work if you content does not exceeds a single line.

    Since capitalize does not work on upper cased text, we first apply text-transform: lowercase to ensures we lowercase the text. Then we overwrite it with text-transform: capitalize on the :first-line.

    Login or Signup to reply.
  2. 0

    Use this CSS

    .common-search-footer button {text-transform: capitalize;}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search