|
CSS - Colour In A Text Input
Hi. I think this is probably a simple question for you guys. I have a web page with lots of input text boxes. What I would like is when the cursor is in the text box, the background changes to yellow from white. And as an added bounus. Some are originaly grey to indicate required input and maybe even a difrent active colour. Lots of websites do this so must be simple.
TIA Desmond. Similar TutorialsHi there, I was wondering how I would go about creating input fields have a different colour background when teh user has clicked on it and ins typing. I tried using :active, bit it didn't work. Any ideas? I have customized the elements of a form for a website I am working on. I have set the input fields to have a white background, however, in three out of the six textfields the background is yellow (this only happens in Internet Explorer 6). I have checked the CSS, and the yellow isn't included anywhere. If anybody can help I would be grateful. Thanks. In CSS, is it possible to define certain colours for a certain piece of text? For example, in the site I'm doing at the moment, the paragraph font-colour is black, but when the text ''CrudeSep'' comes up, I would like The 'sep' piece of the text to be in orange. This would save me having to make an image to do this! Any help appreciated. Hi folks, my website section "www(dot)mail(dot)tssma(dot)net" has an extra blue bar at the bottom of the page even though i specifically set it to 900 with the following css. I actually dont know why its blue either. Code:
body
{
background-image: url('http://www.tssma.net/templates/renrentemplate/images/Page-BgSimpleGradient.jpg');
top:0;
width: 100%;
height: 900px;
Not only that i cant seem to change the Username and Password input which is currently grey, to black using the css. Help will be greatly appreciated EDIT: Hahah yay, i somehow got rid of the bar on the bottom just need help with the grey input fonts. Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!) Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text. What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at: www.markmcm.co.uk/test/test.html The CSS is as as follows: Code:
/*
* Page Stylesheet
*/
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #eaeaea;
border:0; margin:0; padding:0;
height: 100%;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#container {
margin-left: auto;
margin-right: auto;
min-height: 100%;
width: 936px;
}
* html #container {
height: 100%;
}
#content {
float:left;
position: relative;
height: 528px;
width: 936px;
z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
position: absolute;
float: left;
display: block;
width: 312px;
height: 176px;
}
.miniscreen1 {
top: 0;
left: 0;
}
.miniscreen2 {
top:0;
left: 312px;
}
.miniscreen3 {
top: 0;
left: 624px;
}
.miniscreen4 {
left: 0;
top:176px;
}
.miniscreen5 {
left: 312px;
top:176px;
}
.miniscreen6 {
left: 624px;
top:176px;
}
.miniscreen7 {
left: 0;
top:352px;
}
.miniscreen8 {
left: 312px;
top:352px;
}
.miniscreen9 {
left: 624px;
top:352px;
}
.info {
height: 30px;
top:3px;
left: 40px;
width: 265px;
float: left;
position: absolute;
}
.infobar {
left:0px;
position: absolute;
top: 140px;
width: 312px;
height: 36px;
outline: none;
color:#000;
background: url("data/infobar.png") no-repeat 0 0;
z-index: 650;
}
.infobar:hover {
background-position: 0 -36px;
outline: none;
color:#fff;
}
#infobar span {
display: none;
outline: none;
}
.clip_title {
outline: none;
font-size: 85%;
font-weight: 700;
vertical-align: top;
text-align: left;
}
.clip_sub {
outline: none;
height: 13px;
font-size: 80%;
line-height: 13px;
font-weight: 700;
vertical-align: top;
text-align: left;
}
And the HTML is: Code: <!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"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <meta name="description" content=" " /> <meta name="keywords" content=" " /> <meta name="generator" content=" " /> <link rel="stylesheet" type="text/css" href="page.css" media="screen" /> </head> <body> <div id="container"> <div id="content"> <span class="miniscreen1"> <a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen2"> <a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen3"> <a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen4"> <a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen5"> <a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen6"> <a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen7"> <a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen8"> <a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen9"> <a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> </div> </div> </body> </html> There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!) is there a way to align the text inside a <input type="text" name="fff" > to the center? thanks for the help in advance I wish all input-texts (input type="text") on my page to have a width of 200px, but I don't want any other input items, such as checkbox or button, to get this attribute. I tried the following in the style section, but it doesn't work. input.text { width:300px; } Note that the following DOES work, but it affects other input items as well, which I don't want: input { width:300px; } Any ideas would be welcome. Due to time constraints, no questions for further clarification of the problem will be answered. Thank you. I have a disabled input field that is managed by PHP scripts. I need the fields to appear to the user but to look like just text. The main problem is that I have a patterned background on the page and I don't know how to create the style so that there is a transparent background on the input field. Can someone help? TIA. Hi there, I have this basic CSS: Code: input.text {
font-size: 11px;
border: 1px #93A6C6 solid;
background-color: #FFFFFF;
color: #3F5674;
font-family: Arial, Helvetica, sans-serif;
}
select {
font-size: 11px;
background-color: #FFFFFF;
color: #3F5674;
padding-right: 3px
}
textarea {
font-size: 11px;
border: 1px #93A6C6 solid;
background-color: #FFFFFF;
color: #3F5674;
font-family: Arial, Helvetica, sans-serif; letter-spacing: 0px; word-spacing: 1pt;
}
The input box style isn't working correctly. The text I type in is coming out black and in a larger font than specified. If I just use style input rather than input.text it does work, but then it will put square borders around radio check boxes, which I don't want. Any ideas why it isn't working? This is the form it is being used on: Code: <form name="Albums Search" method="get" action="searchresults.php">
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><div align="center">
<input name="searchterm" type="text" tabindex="1" size="50" maxlength="75">
</div></td>
<td rowspan="2" align="center" valign="middle"><div align="center">
<input type="submit" value="Search">
</div></td>
</tr>
<tr>
<td><div align="center">Artist:
<input name="searchtype" type="radio" value="artist" checked>
Title:
<input name="searchtype" type="radio" value="title">
Year:
<input name="searchtype" type="radio" value="year">
</div></td>
</tr>
</table>
<p>
<textarea name="textarea"></textarea>
</p>
</form>
Thanks Hey, I'm having a problem changing the background of a text input field to white. The problem seems to go away when I remove the javascript...I know next to nothing about javascript. Any ideas? Code: <label for="email"> <input size=30 id="email" name="iemailaddress" value="Enter your email address here" onFocus="functionEmpty(this.form)" onBlur="emptyFill(this.form)" onKeypress="subEnable(this.form)"> </label> Code: input {background-color:white;}
HTML <div class="unitWide"> <div class="labelRight" id="appt"> Reaction</div> <div class="widget"><input type="text" name="Name" size="30"/></div> </div> <div class="unitAutoHeight"> <div class="labelRight">Description</div> <div class="widget"> <textarea name="comments"class="wideComment" rows="6" cols="28"></textarea></div> </div> CSS .unitSmall, .unitWide, .unitSmaller, .unitAutoHeight, .unitPair, .unitCal { float: left; z-index:1; width: 100%; height: 2.4em; padding-bottom: 6px; } .unitAutoHeight { height: auto; } input, .wideComment { font-size: 16px; padding: 3px; background: transparent; background-image: url(../images/inputbackground.png); border: none; color: #3f3f3f; font-weight: bold; width: 23.6em; } Hi y'all, Ive got form elements (here called 'units') stacked vertically and left floated to ensure alignment in a fixed-width form. Im trying to get the comment input box to stretch vertically, and add rows as the user inputs longer text. Basically I want to save space on the form by not specifying a predetermined number of rows (which is not the case right now, theres 6 rows), but to let it expand and not hide the overflow or worse, display a sidebar. Ive tried everything, looked in javascript forums, cant find it! Ideally it would behave like the new facebook message or wall post text box. Thanks This is driving me nuts.... You see how the text is a tad hight than the form input ? How do i make them align ?! Thanks. I want to create a div that goes right under an input, I can get it to look fine in FF but not IE using absolute positioning. Is there anyway I can position the new div relative to the input rather relative to containers around it? How do I align an actual text input box to the center of the screen using css? Not sure if this is an HTML or CSS related question but here goes... googling gives me nothing. I have a form that I've built and on occasion one or two of the text fields may have text in side them but I've sent the text field to 'disabled' so that the user cannot change the information inside. The problem is is that some of my users are a little bit older and have a hard time seeing what is inside of the disabled text field because its already grayed out and the text inside is gray. Does anyone know if there is a way to change this or is it just a default with internet explorer? Thanks! Hi! I'm in no way "new" to CSS and html, but I don't work with it on a regular basis. That said, what I'm trying to do, I would expect to work without too much trouble, but it's just not behaving like I'd expect. Seeing code is always a lot easier than trying to describe it, so here's the link to the page I'm trying to fix : chromocode.ca/test/ The issue I have is that the search box doesn't align with the image of the search button, even though they are the same height, and all elements (the input, the image, and its containing div) have 0 padding and 0 margin. I tried to put a top-margin of 2px on the image, that lowered the whole thing. Besides, it doesn't look exactly the same in IE7, Firefox and Chrome, so I don't want to start pixel-adjusting for each browser. Does anyone have any clue what I could do to fix this? Hi there! I'll cut right down to the chase: is my method of styling form input fields efficient? Is there a better way to do it? I tried directly styling the input, rather than putting it in a div, but it didn't work in IE (when too much text went into the field, the background would move, no matter what I did. ) Also, is my <label> styling okay? HTML Code: Original - HTML Code <div class="formRow"> <div class="textInput"> <input class="textInput" id="name" type="text" /> <label for="name">Name</label> </div> </div> <div class="formRow"> <div class="textInput"> <input class="textInput" id="name" type="text" /> <label for="name">Name</label> </div> </div> CSS Code: Original - CSS Code #content div.formRow:hover { background-color: #EEE; } #content input.textInput { font-size: 14px; color: #666; padding: 3px 5px; width: 190px; height: 20px; border: 0; background-color: transparent; } #content input.textInput:focus { color: #000; } #content div.textInput { margin-left: 50px; background: transparent url('images/textInput.png') no-repeat; } #content div.textInput label { font-size: 14pt; font-weight: bold; margin-left: 50px; vertical-align: top; }
And lastly... my image: Thanks a lot! I recently put a section on my web page that allows people to submit data to database, and it works but it looks kind of plain. And I had seen this web page (http://textsfromlastnight(dot)com/Submit-a-Text.html) and saw how they seem to use a custom text box for their submit form. Can anyone explain to me how they did this? Or if its done with something other than CSS possibly point me in the right direction to learn? Thanks in advance!! Hey as the topic title says, can I put a background-image on a text input so that it shows in safari? I can't figure it out and can't find anything using google. Anyone have any experience with this? Thanks I'm going round and round without getting any head way so hopefully someone can give me a hand... I'm creating a mail form using a background image for the input fields. What I don't want is a border. If I don't add a border: solid black, for instance, I get a default white. Is there a way to have no border? Code: INPUT.email {
background-image: url(images/bg_email.jpg);
width:206px;
height:21px;
font-family: Verdana, sans-serif;
font-size: 14px;
color: #ffffff;
border: 1px solid black;
margin: 0 0 0 10px;
padding: 0 0 0 6px;
}
Thanks in advance! |
|||||||