Case convert (text-transform) on click using HTML and CSS-CodePudding

I am trying to create a text area in WordPress where I can type/paste any text and by clicking on the button, all of them should be UPPER/lower CASE (using HTML and CSS).

Here is the code I have added to the top of the content:

HTML area;
<div id="form">
<textarea placeholder="Type or paste text here"></textarea>
<div >
<div ><button type="button" >UPPER CASE</button></div>
<div ><button type="button" >lower case</button></div>
</div>
</div>

Here is the CSS that I used in theme custom CSS setting:

#form textarea {
height: 25vh;
min-height: 7.25em;
max-height: 67vh;
resize: vertical;
}
#form .wp-block-columns {
margin: 0;
}
#form .wp-block-column {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
#form button {
width: 100%;
}
.wp-block-column.uppercase {
text-transform: uppercase;
}
.wp-block-column.lowercase {
text-transform: lowercase;
}

The text area is fine, buttons are good but the text is not converting. I am new and tried many things all day so now I need expert advice. Thanks

CodePudding user response：

You can easily do it using input and label HTML tags. Here's the code:
HTML:

HTML area;
<input type="radio" name="case" id="upper-case">
<input type="radio" name="case" id="lower-case">
<div id="form">
  <textarea  placeholder="Type or paste text here"></textarea>
  <div >
   <div >
     <label  for="upper-case">
       UPPER CASE
     </label>
   </div>
   <div >
     <label  for="lower-case">
       lower case
     </label>
   </div>
 </div>
</div>

CSS:

#form textarea {
height: 25vh;
min-height: 7.25em;
max-height: 67vh;
resize: vertical;
}
#form .wp-block-columns {
margin: 0;
}
#form .wp-block-column {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
#form button {
width: 100%;
}
#upper-case:checked ~ #form textarea {
text-transform: uppercase;
}
#lower-case:checked ~ #form textarea {
text-transform: lowercase;
}
input {
  visibility: hidden;
}
label {
  display: block;
  text-align: center;
  background-color: lightgrey;
  padding: 5px;
  border-radius: 20px;
  cursor: pointer;
}