2

I have a form which is prepopulated from a very large table of addresses. Due to other reasons, this cannot be changed. The data (city name, in this case) is stored uppercase.

I need to translate it into proper case, first letter capitalised, the rest lowercase. Because users are continually correcting it and resubmitting.

EDIT: Please note, I'm not trying to change the value of the field, just the visual representation of it.

I could do it in PHP, or use JS, but I'd prefer to use CSS as it's the simplest least obtrusive way.

I've tried using text-transform:lowercase to drop the case of all the letters, then selector:first-letter {text-transform:uppercase} to raise the case of the first letter, but it's not working when applied to the input field. The first part (dropping the case of all letters) works fine, it goes from the value of "MANCHESTER" to "manchester" fine, but the second part with the pseudo selector won't work; as-in, it doesn't give me "Manchester".

input#address_3 {
    text-transform:lowercase;
}
input#address_3:first-letter {
    text-transform:uppercase;
}

Any help would be appreciated.

PS. See here: CSS text-transform capitalize on all caps

Community
  • 1
  • 1
i-CONICA
  • 2,361
  • 9
  • 30
  • 45
  • 1
    a style effect won't change the value stored in your input fields: they will be always submitted in uppercase – Fabrizio Calderan Jan 20 '14 at 11:02
  • That's correct. I don't want it to change the value, it's going to be uppercased when put in the database on pre-save anyway so it'd be pointless. It's just a visual representation of the correct case that I need so that users don't correct the case and save, only for it to be returned, pre-populated uppercase. – i-CONICA Jan 20 '14 at 11:11

1 Answers1

2

You cannot use :first-letter with input but if you are trying to capitalize the first word than why don't you use

input[type=text] {
    text-transform: capitalize;
}

Demo

Now this will do the same thing which you were trying to achieve in a complicated way, and also, a way in which it won't work...

As commented by Fabrizio, don't expect CSS to convert the case for you, it just converts the case on the front end, your data will end up in lower case or capitalized if user does so..

For example something like

<p>Hello</p>

p {
    text-transform: uppercase;
}

Demo

Now copy and paste the text from the demo, and see, it won't retain the case of the letters you have transformed, but how they are written in the source.

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
  • As far as I've understood the real problem of OP is about values submitted and no style change will be able to change the data – Fabrizio Calderan Jan 20 '14 at 11:04
  • See comment above. I don't want the value changed. I said the way the data is stored cannot be changed. It's always going to be uppercase in the database. I just need a visual representation of the correct case so users don't attempt to correct it when shown their address. – i-CONICA Jan 20 '14 at 11:12
  • I was trying to do it in a complicated way because the way you suggested won't work either. text-transform: capitalize; only affects the first letter, and so it won't drop the case of the rest of the letters. – i-CONICA Jan 20 '14 at 11:14
  • @i-CONICA I don't know what you edited, but anyways, you won't be able to achieve this using CSS, you will require JS with onchange event – Mr. Alien Jan 20 '14 at 11:23
  • It's not an onchange event. It's onload. The data is prepopulated from the backend. I edited by adding a value="MANCHESTER" to your input field. If you try that, you'll see that capitalize doesn't work, as the first letter is already cap, and it doesn't affect any further letters. EDIT: See updated fiddle: http://jsfiddle.net/5sXfT/3/ – i-CONICA Jan 20 '14 at 11:27
  • 1
    @i-CONICA Ok, I don't know its prepopulated, so I suggested you to use onchange, so as you say, it will be on load then – Mr. Alien Jan 20 '14 at 11:39