{"id":62119,"date":"2023-12-29T03:01:50","date_gmt":"2023-12-28T17:01:50","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=62119"},"modified":"2023-12-29T06:17:50","modified_gmt":"2023-12-28T20:17:50","slug":"starts-with-textarea-css-styling-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/starts-with-textarea-css-styling-tutorial\/","title":{"rendered":"Starts With Textarea CSS Styling Tutorial"},"content":{"rendered":"
\"Starts<\/a>

Starts With Textarea CSS Styling Tutorial<\/p><\/div>\n

The other day when we presented PHP\/Javascript Decoding Scrambled Words Game CSS Tutorial<\/a> there were two CSS selector “starts with” scenarios referenced …<\/p>\n

\n<style>
\n
\n.guess* { width: 40px; } \/\/ thanks to https:\/\/stackoverflow.com\/questions\/13352080\/match-all-elements-having-class-name-starting-with-a-specific-string<\/a>
\n<\/code>
\n<\/style>
\n<\/p>\n

… let alone what was used (ie. select element name attribute “starts with” ^ syntax) and opens up interesting possibilities too …<\/p>\n

\n<style>
\n
\n select[name^='guess'] { width: 40px; } \/\/ https:\/\/stackoverflow.com\/questions\/41832255\/css-class-name-selector-name-starts-with<\/a>
\n<\/code>
\n<\/style>\n<\/p><\/blockquote>\n

Is there such a selector as …<\/p>\n


\n textarea[value^='text at the start'] { background-color: yellow; }
\n<\/code><\/p>\n

? Alas, no. But there is …<\/p>\n


\n textarea[title^='text at the start'] { background-color: yellow; }
\n<\/code><\/p>\n

… associated with the static initial HTML …<\/p>\n


\n<textarea title='' cols=80 rows=20 onkeydown='return tuttifrutti(event);' onkeypress='return unwell(this);' onchange=well(this); onblur=well(this); id=myta><\/textarea>
\n<\/code><\/p>\n

… possible, and there are HTML textarea event elements which might help …<\/p>\n