CSS Codes
CSS Layouts

<html>

<head>

<style>

/* Demos styles. Remove if desired */

/* demo #1 textarea */

.control-copytextarea{
cursor: pointer;
font-weight: bold;
padding:3px 10px;
border-radius: 5px 5px 0 0;
background: darkred;
color: white;
display: inline-block;
box-shadow: 0 0 3px gray;
}

/* demo #2 input text with control */

#select2{
line-height: 25px;
font-size: 105%;
width: 95%;
max-width: 500px;
margin: 0;
}

.control-copyinput{
cursor: pointer;
font-weight: bold;
padding:3px 10px;
border-radius: 8px;
background: darkred;
color: white;
display: inline-block;
box-shadow: 0 0 3px gray;
line-height: 25px;
}

/* demo #3 input text only */

fieldset{
width: 95%;
background: lightyellow;
max-width: 600px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#select3{
font-size: 105%;
margin: 0;
width: 90%;
max-width: 500px;
}

/* demo #4 regular div */

#select4{
width: 200px;
border: 1px solid orange;
padding: 5px;
background: lightyellow;
}

.control-copydiv{
cursor: pointer;
margin-top: 8px;
display: inline-block;
border: 1px solid red;
color: red;
padding: 2px 5px;
border-radius: 3px;
margin-top: 8px;
background: white;
}

</style>

</head>

<body>

<!-- demo #1 textarea -->

<span class="control-copytextarea" onClick="return fieldtoclipboard.copyfield(event, 'select1')">Select All</span><br>
<textarea id="select1" name="select1" rows=10 cols=35>
There is no passion to be found playing small - in settling for a life that is less than the one you are capable of living. --Nelson Mandela
</textarea>

<br /><br />

<!-- demo #2 input text with control -->

<input id="select2" name="select2" type="text" value="http://www.dynamicdrive.com/dynamicindex11/selectform.htm" size="35" />
<span class="control-copyinput" onClick="return fieldtoclipboard.copyfield(event, 'select2')">Copy</span>

<br /><br />

<!-- demo #3 input text only -->

<fieldset>
<legend>Share this URL. Click to copy to clipboard!</legend>
<input id="select3" name="select3" type="text" value="http://www.dynamicdrive.com/dynamicindex11/selectform.htm" size="35" onClick="return fieldtoclipboard.copyfield(event, this)"/>
</fieldset>

<br /><br />

<!-- demo #4 regular div -->

<div id="select4">
Our greatest weakness lies in giving up. The most certain way to succeed is always to try just one more time. --Thomas A. Edison
</div>
<span class="control-copydiv" onClick="return fieldtoclipboard.copyfield(event, 'select4')">copy</span>

<script src="fieldtoclipboard.js">

/***********************************************
* Select (and copy) Form Element Script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Add this script to the very END of your page, right above the </body> tag if possible
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

</body>

</html>