Hey,
On my site [ Seek-Design.com ], i have a login form. The "Remember Me?" select box, is it possible to "color" it fully, not just the frame?
Also when a user registeres he can uplaod a avatar in his profile, and the user gets a private uploader. It has forms and then a "Search your comp for a file" button, is it possible to color that?
If you want to see the uplaod form and avatar upaloder login as:
User: test
Pass: 7587
And select "File Space" and "profile"
Full Version: Forms...
QUOTE(SeeK @ Dec 1 2004, 11:47 AM)
Hey,
On my site [ Seek-Design.com ], i have a login form. The "Remember Me?" select box, is it possible to "color" it fully, not just the frame?
On my site [ Seek-Design.com ], i have a login form. The "Remember Me?" select box, is it possible to "color" it fully, not just the frame?
what are you viewing it in? it's colored in IE and FF !?!
Coloured for me too
maybe if you could take a screenshot?
welcome to the forum by the way
welcome to the forum by the way
ok, see what you mean, we didn't see it because most of us use firefox where it comes out different. I'll have to download the page and have a fiddle
you can't change that.
sorry you can't style the select element border in IE.
You can however style the upload button fine
<input type="submit" value="Browse" style="border:1px solid black;background:yellow;">
You can however style the upload button fine
CODE
<input type="submit" value="Browse" style="border:1px solid black;background:yellow;">
posted at the same time
Why aint it possible to style the border? That sux!
And for the browse button aint it possible to style it in the CSS?
This is what i have now:
textarea, input, select, option { font-family: Verdana; font-size: 10px; font-color: #AAAAAA; background-color: #4a4a4a; color: #AAAAAA; border: 1px dotted #000000;}
input.radio { background-color: transparent; border: 0px dotted #4a4a4a;}
input.checkbox{ width: 15px; height: 15px; background-color: #4a4a4a; border: 0px dotted #262626;}
form { margin: 0px; margin-left: auto; margin-right: auto;}
And for the browse button aint it possible to style it in the CSS?
This is what i have now:
CODE
textarea, input, select, option { font-family: Verdana; font-size: 10px; font-color: #AAAAAA; background-color: #4a4a4a; color: #AAAAAA; border: 1px dotted #000000;}
input.radio { background-color: transparent; border: 0px dotted #4a4a4a;}
input.checkbox{ width: 15px; height: 15px; background-color: #4a4a4a; border: 0px dotted #262626;}
form { margin: 0px; margin-left: auto; margin-right: auto;}
QUOTE(leo @ Dec 1 2004, 01:40 PM)
sorry you can't style the select element border in IE.
You can make a psuedo option menu (select) by using a list based menu and styling that (javascript required to hide/show menu items)....
QUOTE(leo @ Dec 1 2004, 02:40 PM)
You can however style the upload button fine
CODE
<input type="submit" value="Browse"w>
[right][snapback]19232[/snapback][/right]
hmmm... if he's using a <input type="file"...> he can't change the "browse" button
QUOTE(karinne @ Dec 1 2004, 02:07 PM)
hmmm... if he's using a <input type="file"...> he can't change the "browse" button
[right][snapback]19237[/snapback][/right]
[right][snapback]19237[/snapback][/right]
True, but there again using css and javascript you can change the visibility of the file input and lay another custom button over top and transfer the value of the file input to your custom button... Of course, those with javascript disabled will see the default button, not the custom button...
Here is an example of a custom select...
Please note this example uses a button to switch between the default option menu which those with javascript disabled will see and the custom menu those with javascript enabled will see (in a practical application the changing from default to custom would be fired when the page loads using either the window or body elements)...
CODE
<html>
<head>
<title>ListBox Upgrade</title>
<script>
function upgradeSelect()
{ scs=document.getElementsByTagName('select');
for(i=0; i<scs.length; i++)
if(parseInt(scs[i].size)>1)
new KLSelect(scs[i]);
}
function KLSelect(sc)
{ kls=document.createElement('div');
kls.className = sc.className;
for(i=0; i<sc.options.length; i++)
{ with(popt=kls.appendChild(document.createElement('p')))
{ appendChild(document.createTextNode(sc.options[i].firstChild.nodeValue));
if(sc.options[i].selected) className = 'KLOptionSelected';
else className = 'KLOption';
// title = firstChild.nodeValue;
attachEvent('onclick',KLOptionClicked);
attachEvent('onmouseover',KLOptionMouseOver);
attachEvent('onmouseout',KLOptionMouseOut);
}
popt.optionValue = sc.options[i].value;
}
input = document.createElement('input');
input.type = 'hidden';
input.name = sc.name;
input.value = sc.value;
kls.hidinp = input;
if(sc.form) sc.form.appendChild(input);
else sc.parentNode.appendChild(input);
sc.parentNode.replaceChild(kls,sc);
return;
}
function KLOptionClicked(e)
{ KLSelectOption(e.srcElement);
return;
}
function KLOptionPopUpClicked(e)
{ KLSelectOption(e.srcElement.optionNode);
e.srcElement.className = 'KLOptionPopUpSelected';
return;
}
function KLSelectOption(klopt)
{ with(klopt.parentNode)
for(i=0; i<childNodes.length; i++)
childNodes[i].className = 'KLOption';
klopt.parentNode.hidinp.value = klopt.optionValue;
klopt.className = 'KLOptionSelected';
return;
}
function KLOptionMouseOver(e)
{ if(e.srcElement.offsetWidth > e.srcElement.parentNode.offsetWidth)
{ e.srcElement.textPopUp = document.createElement('p');
e.srcElement.textPopUp.className = (e.srcElement.className == 'KLOptionSelected') ? 'KLOptionPopUpSelected' : 'KLOptionPopUp';
e.srcElement.textPopUp.style.left = getClientX(e) + 'px';
e.srcElement.textPopUp.style.top = getClientY(e) + 'px';
e.srcElement.textPopUp.attachEvent('onclick',KLOptionPopUpClicked);
e.srcElement.textPopUp.attachEvent('onmouseout',KLOptionPopUpMouseOut);
e.srcElement.textPopUp.appendChild(document.createTextNode(e.srcElement.firstChild.nodeValue));
e.srcElement.textPopUp.optionNode = e.srcElement;
document.body.appendChild(e.srcElement.textPopUp);
}
}
function KLOptionMouseOut(e)
{ if(e.srcElement.textPopUp)
if(e.toElement != e.srcElement.textPopUp)
document.body.removeChild(e.srcElement.textPopUp);
}
function KLOptionPopUpMouseOut(e)
{ document.body.removeChild(e.srcElement);
}
function getClientX(e)
{ return e.clientX - e.offsetX - document.body.clientLeft + document.body.scrollLeft;
}
function getClientY(e)
{ return e.clientY - e.offsetY - document.body.clientTop + document.body.scrollTop;
}
function testValue()
{
theform = document.getElementById('form');
for(i=0; i< theform.elements.length; i++)
{ if( theform.elements[i].name == 'test') alert(theform.elements[i].value);
}
}
</script>
<style>
.KLSelect
{ width: 125px;
height: 50px;
background: #eeeeee;
border: groove #808080 3px;
font-family: Tahoma, sans-serif;
font-size: 11px;
overflow: auto;
overflow-x: hidden;
}
.KLOption, .KLOptionSelected
{ margin: 0px;
padding: 1px 3px 1px 3px;
width: 100%;
white-space: nowrap;
cursor: pointer;
cursor: hand;
}
.KLOptionPopUp, .KLOptionPopUpSelected
{ display: block;
position: absolute;
margin: 0px;
padding: 0px 2px 0px 2px;
border: solid black 1px;
background: #eeeeee;
white-space: nowrap;
font-family: Tahoma, sans-serif;
font-size: 11px;
cursor: pointer;
cursor: hand;
}
.KLOptionSelected, .KLOptionPopUpSelected
{ background: #303030;
color: #ffffff;
}
</style>
</head>
<body>
<p>Example of emulating select control with division element</p>
<form id="form">
<select size="4" name="test" class="KLSelect">
<option value="1" selected>option 1 which is rather long</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5 which is pretty darn long as well</option>
<option value="6">option 6</option>
</select>
<p>
<button onclick="upgradeSelect()"> Replace Select Control</button>
</p>
<p>
<button onclick="testValue()"> Check Value</button>
</p>
</form>
</body>
</html>
.....Willy
good lord... that's alot of code 
nice tip tho willy
nice tip tho willy
he's using a submit button to upload the files, i think 
no sorry, looking at the wrong button, he is using file.
no sorry, looking at the wrong button, he is using file.
hehe, ignore me, i'm ass about face today 
QUOTE(karinne @ Dec 1 2004, 02:20 PM)
good lord... that's alot of code
nice tip tho willy
[right][snapback]19241[/snapback][/right]
nice tip tho willy
[right][snapback]19241[/snapback][/right]
I'm sure I have another example (if not several) that is/are more optimized but that is one that was easy to find in my archives because I had named it psudeoOptionMenu.txt....
BTW: I did not write that Vladdy did and I will need to find the discussion where several of us provided examples to find the one I wrote...
.....Willy
Edit:
QUOTE(karinne @ Dec 1 2004, 02:21 PM)
nevermind * please delete this post *
[right][snapback]19243[/snapback][/right]
[right][snapback]19243[/snapback][/right]
Tee Hee... my double post disappeared even after I editted it to indicate what happened... Well, I know I can get around the anti-spam posting time limit by changing IP#'s from one second to another...
hehe, i thought i'd deleted it before you noticed you had double posted
hehe, now it looks like i'm talking to myself
FWIW: Here is the psuedo file button codes....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">
/* File Object
------------------------------------------------------------*/
input {
border: 1px solid #ccc;
background-color: #e4e4e4;
}
</style>
<script type="text/javascript">
function emulateFile () {
obj = document.getElementById ('file');
// Click the hidden <input type="file" /> object
obj.click ();
// Now grab the file object's value and stick it in the dummy text input
document.getElementById ('loc').value = obj.value;
}
</script>
</head>
<body>
<form method="post" action="">
<input type="file" name="file" id="file" style="display: none;" />
<p>File<br />
<input type="text" id="loc" /> <input type="button" value="Browse..." onclick="emulateFile ()" /></p>
</body>
</html>
.....Willy
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">
/* File Object
------------------------------------------------------------*/
input {
border: 1px solid #ccc;
background-color: #e4e4e4;
}
</style>
<script type="text/javascript">
function emulateFile () {
obj = document.getElementById ('file');
// Click the hidden <input type="file" /> object
obj.click ();
// Now grab the file object's value and stick it in the dummy text input
document.getElementById ('loc').value = obj.value;
}
</script>
</head>
<body>
<form method="post" action="">
<input type="file" name="file" id="file" style="display: none;" />
<p>File<br />
<input type="text" id="loc" /> <input type="button" value="Browse..." onclick="emulateFile ()" /></p>
</body>
</html>
.....Willy
QUOTE(karinne @ Dec 1 2004, 08:07 PM)
hmmm... if he's using a <input type="file"...> he can't change the "browse" button
[right][snapback]19237[/snapback][/right]
[right][snapback]19237[/snapback][/right]
Actually Karinne, thats not entirely true ...
http://www.quirksmode.org/dom/inputfile.html
A very nice looking solution ... slightly late aswell but better late than never
good link joe... but too bad you need javascript to make it "fully" work.
Yeah, thats true, but reading through the entire article it seems that once you have selected a file you are unable to 'un-select' it 
pity; but looks very nice
pity; but looks very nice
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.