PDA

View Full Version : Can you style a variable?

PeaTearGriffin
02-22-2008, 04:50 PM
I have tried standard html tags but they don't seem to work. I try googling, but didn't really get anything.

For example, say I have a input text form field and I am getting it to show two variables, but I want the first variable to be bolded. How can I do that?
Philip M
02-22-2008, 06:05 PM
You can certainly style a textbox:-

<style>
input.nb {
font-variant:small-caps;
color:#0000FF;
background:#FFFFFF;
border:0px;
}
</style>

<input type = "text" class = "nb" name = "txt1" size = "30">

But I don't think you can bold just one element.
PeaTearGriffin
02-22-2008, 06:19 PM
Yea I wanted to bold just an element in the text field, not everything. Thanks anyways.
Ultragames
02-23-2008, 01:00 AM
No, you cannot apply styles to only a certain part of an input feild or textbox. The way that you normal seen this done is through JavaScript trickery, where a DIV or other container is made to look like a textbox and the styles are applied inside that. then you just use JavaScript to strip the HTML tags out of the text in the DIV and put the pure text into the real textbox.

But if all you want to do is simply style some text in an input and not others, you cannot do it.
_Aerospace_Eng_
02-23-2008, 01:34 AM
You can get creative and make it look like the first letter is bold by putting it in its own div. Something like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div.leftbox {
float:left;
border:1px solid #000;
border-right:0;
background:#06F;
color:#000;
font-size:1em;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
}
input.textbox {
border:1px solid #000;
border-left:0;
background:#06F;
color:#000;
margin:0;
padding:0;
font-size:1em;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
label {
float:left;
}
</style>
<script type="text/javascript">
var flag = true;
function setFirstLetter(where,what)
{
el = document.getElementById(what).value;
if(flag)
{
if(el.length > 0)
{
document.getElementById(where).firstChild.nodeValue = el.substr(0,1);
str = el.substr(1,el.length);
document.forms[0].elements[what].value = el.substr(1,el.length);
flag = false;
}
}
}
window.onload = function()
{
setFirstLetter('firstletter','textinput');
}
</script>
</head>

<body>
<form>
<div>
<label for="textinput">Enter your input:&nbsp;</label>
<div class="leftbox" id="firstletter">&nbsp;</div><input type="text" onkeyup="setFirstLetter('firstletter','textinput')" name="textinput" id="textinput" class="textbox" />
<input type="reset" value="Reset" onclick="document.getElementById('firstletter').innerHTML = '&nbsp;';flag = true" />
</div>
</form>
</body>
</html>

Now however you will have to pass the first letter to your form some how. You could use JS but JS can be disabled.