Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS only for input type text 1

Status
Not open for further replies.
SBGibson

SBGibson

Programmer
Apr 18, 2001
125
IT
I would like to make a style redefinition of INPUT element but only for "text" type, it's possible? I've found this syntax but it doesn't work:

INPUT[TYPE='text']
{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
border: 1px solid #000000;

}

I can't assign class to individual elements, I need to redefine all text elements. It's possible? Stevie B. Gibson
 
Sort by date Sort by votes
I have never seen it the way you posted. Easiest way is just to assign a class to the inputs which you want.

input.xxx {.......}


<input type=&quot;text&quot; class=&quot;xxx&quot; />



É ::
 
Upvote 0 Downvote
Thanks but as I said I cant assign css class to individual objects, I must use a generic INPUT redefinition class for all text object. Stevie B. Gibson
 
Upvote 0 Downvote
SBGibson, i'm not sure there's a CSS syntax that deals with all input types...
The best way is to use create a class, and then call that class on all input types, or use JS and call that class on all selectIndex('input')... Forget the Nobel Peace prize, I just want to take over the world!! [hammer]
 
Upvote 0 Downvote
Hi, is it what you are looking for?
-----------------------------------
<html>
<head>
<style>
textarea { BORDER: 2px groove; FONT-SIZE: 11px; FONT-FAMILY: verdana; }
select { BORDER: 2px groove; FONT-SIZE: 11px; FONT-FAMILY: verdana; }
</style>
</head>
<form name=&quot;Frm&quot; method=&quot;POST&quot;>
<table border=&quot;0&quot; cellspacing=&quot;1&quot; cellpadding=&quot;2&quot;>
<tr>
<td><textarea rows=&quot;2&quot; name=&quot;S1&quot; cols=&quot;20&quot;>text</textarea></td>
</tr>
<tr>
<td>
<input type=&quot;checkbox&quot; name=&quot;C1&quot; value=&quot;ON&quot;> <input type=&quot;checkbox&quot; name=&quot;C2&quot; value=&quot;ON&quot; checked></td>
</tr>
<tr>
<td>
<input type=&quot;radio&quot; value=&quot;V1&quot; name=&quot;R1&quot;> <input type=&quot;radio&quot; value=&quot;V2&quot; checked name=&quot;R1&quot;></td>
</tr>
<tr>
<td>
<select size=&quot;1&quot; name=&quot;D1&quot;>
<option>text</option>
</select></td>
</tr>
<tr>
<td>
<input type=&quot;text&quot; name=&quot;T1&quot; size=&quot;20&quot; value=&quot;text&quot;></td>
</tr>
<tr>
<td>
<input type=&quot;password&quot; name=&quot;T2&quot; size=&quot;20&quot; value=&quot;text&quot;></td>
</tr>
<tr>
<td>
<input type=&quot;button&quot; value=&quot;Button&quot; name=&quot;B3&quot;></td>
</tr>
<tr>
<td>
<input type=&quot;submit&quot; value=&quot;Submit&quot; name=&quot;B1&quot;></td>
</tr>
<tr>
<td>
<input type=&quot;reset&quot; value=&quot;Reset&quot; name=&quot;B2&quot;></td>
</tr>
</table>
<form>

<script>
function ElementsStyle()
{ f =document.forms[0];
for (i=0;i<f.elements.length;i++)
{
if(f.elements.type==&quot;text&quot;)
{
f.elements.style.border = &quot;2px groove&quot;;
f.elements.style.fontSize = &quot;11px&quot;;
f.elements.style.fontFamily = &quot;verdana&quot;;
}
if(f.elements.type==&quot;password&quot;)
{
f.elements.style.border = &quot;2px groove&quot;;
f.elements.style.fontSize = &quot;11px&quot;;
f.elements.style.fontFamily = &quot;verdana&quot;;
}
if(f.elements.type==&quot;button&quot;)
{
f.elements.style.borderRight = &quot;#666666 1px solid&quot;;
f.elements.style.borderTop = &quot;#cccccc 1px solid&quot;;
f.elements.style.borderLeft = &quot;#cccccc 1px solid&quot;;
f.elements.style.borderBottom = &quot;#666666 1px solid&quot;;
f.elements.style.fontSize = &quot;11px&quot;;
f.elements.style.fontFamily = &quot;verdana&quot;;
}
if(f.elements.type==&quot;submit&quot;)
{
f.elements.style.borderRight = &quot;#666666 1px solid&quot;;
f.elements.style.borderTop = &quot;#cccccc 1px solid&quot;;
f.elements.style.borderLeft = &quot;#cccccc 1px solid&quot;;
f.elements.style.borderBottom = &quot;#666666 1px solid&quot;;
f.elements.style.fontSize = &quot;11px&quot;;
f.elements.style.fontFamily = &quot;verdana&quot;;
}
if(f.elements.type==&quot;reset&quot;)
{
f.elements.style.borderRight = &quot;#666666 1px solid&quot;;
f.elements.style.borderTop = &quot;#cccccc 1px solid&quot;;
f.elements.style.borderLeft = &quot;#cccccc 1px solid&quot;;
f.elements.style.borderBottom = &quot;#666666 1px solid&quot;;
f.elements.style.fontSize = &quot;11px&quot;;
f.elements.style.fontFamily = &quot;verdana&quot;;
}

}
}
ElementsStyle()
</script>
</html>

-----------------------------------------
Happy programming,
Adhie
 
Upvote 0 Downvote
Wow, cool thing. Really I hoped that there was a simple class definition without having to use javascript, btw it's a usefull solition, thank you very much Adhie Stevie B. Gibson
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
755
pmonett
pmonett
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
205
Alt255
Alt255
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
604
PeDa
PeDa
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
711
3esolar
3

Part and Inventory Search

Sponsor

Back
Top