HowTo: Capitalise first letter of the first word entered into an input box

Question

So, I attempted to capitalise, without success, the first character entered into an input box as follows:

Styled component

const SearchStyles = styled.div`
  position: relative;
  input {
    width: 100%;
    padding: 10px;
    border: 0;
    font-size: 2rem;
    &.loading {
      animation: ${glow} 0.5s ease-in-out infinite alternate;
    }
    &:first-letter {
      text-transform: uppercase;
    }
  }
`;

React

                  <input
                    {...getInputProps({
                      type: 'search',
                      placeholder: 'Search For An Item',
                      id: 'search',
                      className: this.state.loading ? 'loading' : '',
                      onChange: e => {
                        e.persist();
                        this.onChange(e, client);
                      },
                    })}
                  />

How do I resolve this?

also should change text-transform: uppercase to text-transform: capitalize — Walter White, Apr 11 '19 at 11:33
You may want to be cautious with this strategy. I assume that a working CSS solution will not affect the underlying value. So the web page or web application might be working with other values than the values that are displayed... (If you type the value `foo` in the input and you manage that `Foo` is displayed using CSS, the actual value will still be `foo`, I guess.) — Bart Hofland, Apr 11 '19 at 11:37
Also take a look at this: https://stackoverflow.com/questions/18397450/select-first-letter-of-input-value-and-change-its-color-via-css — Rakesh G R, Apr 11 '19 at 11:43
@WalterWhite Unfortunately this does not capitalise the character. — TheoG, Apr 11 '19 at 11:44

score 0 · Answer 1 · answered Apr 11 '19 at 12:01

This is not possible using CSS as it stands. You would need to use a contenteditable instead.

<input type="text" value="lowercase value" />
<br>
<div id="fakeinput" contenteditable>lowercase value</div>

input::first-letter {
  text-transform: uppercase; 
}

#fakeinput {
  display: inline-block;
  margin-top: 1em;
  width: 200px;
  border: 1px solid red;
  padding: 1em 2em;
  color: #000;
  &::first-letter {
    text-transform: uppercase;
  }
}

Demo: https://codepen.io/anon/pen/gyWebg

HowTo: Capitalise first letter of the first word entered into an input box

1 Answers1