Forum Moderators: open
Example:
<span><input name="sub" type="submit" id="sub-but" value="Send" /></span>
Is this possible?
Thanks.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<title></title>
<style type="text/css">
span input { font-size: 200%; }
</style>
<script type="text/javascript">
function wrapNode( el, wrapper ) {
var newNode = document.createElement(wrapper);
var parent = el.parentNode;
newNode.appendChild(el.cloneNode(true));
parent.replaceChild(newNode, el);
}
window.onload = function() {
var submitList = document.getElementsByTagName('input');
for (var i = 0; i < submitList.length; i++) {
if (submitList[i].type && submitList[i].type == 'submit') {
wrapNode(submitList[i], 'span');
}
}
}
</script>
</head>
<body>
<input type="text" name="a" value="a">
<input type="button" name="b" value="b">
<input name="c" value="c">
<input type="submit" name="d" value="d">
<input type="checkbox" name="e" value="e">
<input type="submit" name="f" value="f">
</body>
</html>
(Very quickly pasted for anyone to find and use.)
<style type="text/css">body { font:small sans-serif; }
h1 { color:orange; }
a {
text-decoration:none;
color:orange;
}
div#container {
width:40em;
margin:0 auto;
}
form {
clear:both;
padding-bottom:4em;
}
th {
width:7em;
color:orange;
text-align:left;
}
form a {
float:left;
background:url("button.gif") 0 0 no-repeat;
font-weight:bold;
color:gray;
}
form a span {
display:block;
padding:5px 25px 8px;
background:url("button.gif") 100% -30px no-repeat;
}
form a:hover {
color:black;
background-position:0 -60px;
color:white;
}
form a:hover span {
background-position:100% -90px;
}
</style>
<script type="text/javascript">
function parseHTMLInputs() {
var button = /button¦reset¦submit/i;
var inputs = document.getElementsByTagName('input');
var l = inputs.length-1;
for(var input,type,i=l; i>=0; i--) {
input = inputs.item(i);
if(input && button.test(input.type)) {
type = button.exec(input.type)[0];
replaceHTMLInput(input, type);
}
}
}
function replaceHTMLInput(input, type) {
var form = input.form;
var link = document.createElement('a');
var span = document.createElement('span');
span.appendChild(document.createTextNode(input.value));
link.appendChild(span);
link.setAttribute('href', '#');
input.parentNode.replaceChild(link, input);
switch(type) {
case 'submit':
link.onclick = function() {
if(!form.onsubmit ¦¦ form.onsubmit()) form.submit();
}
break;
case 'reset':
link.onclick = function() { form.reset(); }
break;
case 'button':
// ...
break;
}
}
</script>
<script type="text/javascript">
try {
parseHTMLInputs();
} catch(failure){}
</script>
