Home/ Questions/Q 7682875
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T18:40:05+00:00

I have this simple textarea. When it’s not selected, I want it to look

  • 0

I have this simple textarea. When it’s not selected, I want it to look like a finished product(i.e. the sides tapered to the text). I also want to let the user change the width. How can I use the autoresize plugin to do this? 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Pathway Builder</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>

    <textarea class="text_field_not_selected"></textarea>

    <script src="jQuery.js" type="text/javascript"></script>
    <script src="selectors.js" type="text/javascript"></script>
</body>
</html>

javascript/jQuery

$('textarea').bind('focusin blur', function() {
    $(this).toggleClass('text_field_not_selected');
});
$('textarea').autoResize();

css

body {
    display: block;
}

textarea:focus {
    outline:  none;
    text-align: center;
}

.text_field_not_selected {
    text-align: center;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-box-shadow: 0px 3px 5px #444;
    -webkit-box-shadow: 0px 3px 5px #444;
    padding: 5px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    for the first part, you could use something like 

    border-style: none;

    and for the second part you can just click and drag the bottom right corner of the text box and resize it

    • 0