|
CSS - <select> Bakcground Image??
I am trying to set a background image to the select tag of a form, but its not working in IE, here is my css code:
Code:
select {
width:116px;
background:url(../images/inputDropdown.jpg) no-repeat left top #333333;
}
any ideas on a fix for this??? thanks in advance! Similar TutorialsHey, y'all, can you help me out here? Well, first, here's an example I'd like to accomplish at http://www.sparkplug.com/ I'd like to type the text OVER or ON an image but it's not part of the image so you can highlight it. I found some examples from Google using layers, however, these layers are positioned differently using different browsers. I tested using Firefox, IE 6 and Safari. I'm pretty sure that a 'professional' website like sparkplug does not use an amateur-ish technique as layers. :S. P.S Don't suggest me to include the text IN the image, lol, that's not what I would like. -Respect & thanks! Hi, does anyone know the CSS to change the font and background colour on a select box. My code doesn't work and ive tried without luck searching the net for the solution. This must be really simple. Hydroderm hi guys, newbie here. first of all I am no master in HTML or CSS, my main background are non-web, but I've been thrown in at my work to help with this problem they have had for a while, I've progressed it further than most have, but right now I am stuck. I've been handed a half done task and asked to fix it, obviously some of you may know the problems of trying to fix other peoples problems but I hope you can do it for me. More or less, what I have is a stylesheet to help output invoice data, all of the data is being output correctly, apart from the one table in the invoice which has multiple records to go into it For example; QUANTITY ----------- 2 3 4 etc. What I am currently getting, is the code is pulling all the records, and displaying them in the one cell of the table, getting QUANTITY ---------- 234 I need some way to split it up, I'll show you the code I have. ORIGINAL CODE I WAS GIVEN Code:
<xsl:for-each select="key('DATA',C[6])">
<tr class="style16">
<td class="style16"> <xsl:value-of select="C[27]"/></td>
<td class="style16"> <xsl:value-of select="C[28]"/></td>
<td class="style16"> <xsl:value-of select="C[29]"/></td>
<td class="style16"> <xsl:value-of select="C[30]"/></td>
<td class="style16"> <xsl:value-of select="C[31]"/></td>
<td class="style16"> <xsl:value-of select="C[32]"/></td>
<td class="style16"> <xsl:value-of select="C[33]"/></td>
<td class="style16"> <xsl:value-of select="C[34]"/></td>
<td class="style16"> <xsl:value-of select="C[35]"/></td>
</tr>
I've seen made it more consise Code:
<xsl:for-each select="key('DATA',C[6])">
<tr class="style16">
<xsl:for-each select="C[position() >= 27 and position() <= 35]">
<td class="style16"> <xsl:value-of select="."/></td>
</xsl:for-each>
</tr>
does anyone have any ideas as to how I can take the seperate records from the database, and output them into rows each? Apoligies if this is vague... how can a ouline be drawn around a select /dropdown box? i tried the following code n it dint seem to work.Any other solution for drawing a border/outline around select box. <select name="sample" style="font-size:9px;font-face:verdana;width:130px;margin-left: 2cm;border: 2px solid red"> Hi all, I've got a drop down box (select box) inside an element in a table. How can I get the width of the drop down to expand to fill the size of the table element? i.e. I have: | <DROP DOWN> | but want | < DROP DOWN > | Also, is it possible to change the height of a drop down? Thanks, John. Hello, I am trying to style my form inputs, textareas and selects as follows: input, select, textarea { border: solid 6px #ECF0F9; color: #252525; font: normal 0.75em Verdana, Geneva, sans-serif; padding: 0.25em; width: 520px; } I am having a few problems: Firefox 3: 1. The select is narrow than the inputs and textareas; 2. When I click the select the dropdown borders look different ... some are thinner than others. IE 7: 1. The select is narrow than the inputs and textareas; 2. The border of the select is not changed. What am I doing wrong and how can I make the appearance of a Select look the same across various browsers? Can I do this with JQuery? Thanks, Miguel Why <select> tag ignores my CSS settings for border color, instead it renders XP default? I have external CSS file and I assign specific class to <select tag> wich contains: border: 1px solid #545454; it works well on all form fields except <select>. Help? Hi am looking for help changing a form select box with css. I am trying to get the select box in line with the rest of the scroll boxes and arrows on my site.... http://www.peteromoore.com/site3/brochure.htm is there any way to change the select box arrow to match the arrow beside it??? any help would be appreciated. Hi, I've got a simple page that includes a total of 15 of these: Code: <FORM name="DropdownIndex" style="margin:0"> <SELECT name="URL" width="500" text="black" onChange="if(options[selectedIndex].value) window.location.href=(options[selectedIndex].value)"> <OPTION value=""></OPTION> <OPTION value=""></OPTION> </SELECT></FORM> (Each one is inside it's own single-celled table, all of which are nested inside other tables.) In the document's <head></head> I have Code:
<style type="text/css">
select {width:500px;color:#00ff00;background-color:#000000;font-size:12pt;font-family:Gill Sans MT,Verdana;}
</style>
which controls all the form-selects on the page. How do I write things so that I can assign different properties to groups of forms, without having to insert the properties on each and every form-select? Hope I'm being clear, Thanks, Ez Is it possible to remove the embossed bored from a select box. That is just destroying the whole look of my page and i there is a way please let me know. Nick Is this possible? I know how to change the width & font size but not height. Thanks. Hello all, Is there a good way to have the text in a select box be vertically aligned? I have the following: Code: <select style="height: 12em; width: 12em;"> <option value="a">A</option> <option value="b">B</option> </select> Which puts the text in the upper left but I would like it to be in the dead center. I tried vertical-align but it did not work. i'm attempting to use a dropdown menu which applies css and javascript to a list whilst everything usually works fine, i notice that if the page contains a <select> form element the dropdown menu hides behind it, while it covers text box form elements (see attached) i've tried applying z-index to no avail any idea what i can do about it ? the HTML code looks as follows : Code:
<div id="links">
<ul id="nav">
<li class="first">
<table><tr><td><div><a href="index.asp">Home</a></div>
<ul>
<li><a href="...">Old Home Page</a></li>
<li><a href="...">New Home Page</a></li>
<li><a href="...">Traffic Light Home</a></li>
<li><a href="...">Process Review Home</a></li>
<li><a href="...">Switchboard</a></li>
</ul></td></tr></table>
</li>
</lu>
</div>
and the CSS that handles it looks as follows : Code:
#links {background-color: red; padding: 0; border: none; height: 20px;
border-bottom: 1px solid lightgrey;}
#nav {height: 90%;}
#nav li table {width: 100%; height: 100%; margin: 0; padding: 0;
border-left: 1px solid lightgrey;}
#nav li td {text-align: center; vertical-align: center; margin: 0;
padding: 0; font-size: 8pt;}
ul {list-style: none; padding: 0; margin: 0;}
#nav li div {font-weight: bold; color: white; text-decoration: none;
border: none; background: red;}
#nav li li a {display: block; font-weight: normal; color: navy; text-align: left;
padding: 3px 10px 3px 10px; width: 100%;}
#nav li li a:hover {padding: 3px 10px 3px 10px; color: white;
background-color: #7d6340; width: 85%;}
li {float: left; position: relative; text-align: center; cursor: default;
background: red; border: 1px solid red; border-width: 1px 0;}
li.first {border-left-width: 0.5em; border-right-width: 0.5em;
height: 100%; width: 12.5%;}
li ul {display: none; position: absolute; top: 100%; left: 0; width: 180%;
font-weight: normal; background-color: orange; padding: 0.5em 0 1em 0;
border-style: solid; border-width: 1px;
border-color: red #7d6340 #7d6340 #7d6340; z-index: 10;}
li>ul {top: auto; left: auto;}
li li {display: block; float: none; background-color: transparent; border: 0;}
li:hover ul, li.over ul {display: block;}
the javascript bit is nicked straight from SuckerFish, so i assume that's nothing to do with my problem I decided to remove all outlines from my website, so I added the following statement to my CSS file: Code: *
{
outline: none
}
However, in Firefox 2 (but not in IE7), the outline still surrounds the content of a <select> dropdown after a new option is selected. Is there any way to get rid of this outline? I know dropdowns are often part of the operating system so that there are additional restrictions on styling them, but I assume Firefox's dropdowns are not. I've already checked, and the outline property is not being set elsewhere in my code. Thanks for your help! Hey - So I have a page with a disabled multiple select box, which is automatically populated with the relevant selected value. In Firefox, you can still see the value that's been automatically selected even though it's disabled. But in IE, you can't. Is there a way to make IE show that? Thanks in advance. Hi Is it possible to set the size of a <select> box? I have a multiple selection box and I'd like to make it wider than the items it is showing. Purely cosmetic, but I'd like to do it if poss. Thanks im trying to get an effect like this one, where when a textfield or form area is selected, the div around changes bgcolor WooFoo I think i might be able to use the pseudo selectors but not sure if ie will take it. Anyways i would love some suggestions! Please take a look at my css form he http://www.pearl.ru/isdunyasi/admin/default[1].htm For some reason row under select boxes dislocated. I couldnt figure out why. Any help appreciated. Code:
/**************** Form styles ****************/
fieldset {
margin:1em 0;
border:none;
border-top:1px solid #aaaaaa;
}
legend {
color:#aaaaaa;
background:transparent;
font-size:14px;
font-weight:bold;
}
label {
float:left;
width:100px;
padding:0 10px;
text-align:right;
}
fieldset div {
margin-bottom:.5em;
padding:0;
display:block;
}
fieldset div input,fieldset div textarea {
width:150px;
border-top:1px solid #000000;
border-left:1px solid #000000;
border-bottom:1px solid #aaaaaa;
border-right:1px solid #aaaaaa;
padding:1px;
}
#Submit input {
border:1px solid #d7d7d7;
padding:2px;
background:#aaaaaa;
color:#FFFFFF;
font-weight:bold;
}
fieldset div.Req {
font-weight:bold;
}
hello guys! i have a form that contains a listbox, and am using IE6, and i put up a link to my external css file, but the appearance of listbox scroll bars didn't change, only the size of the font was changed, do i am missing something? or this is not possible to change the appearance of scrollbars for the listbox? below is my HTML code: PHP Code: <html> <head> <title>Test Page</title> <LINK href="styles.css" type=text/css rel=StyleSheet> </head> <body> <form method="POST" action="test.htm"> <p><select size="5" name="test"> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> <option value="4">four</option> <option value="5">five</option> <option value="6">six</option> <option value="7">seven</option> <option value="8">eight</option> <option value="9">nine</option> <option value="10">ten</option> </select><input type="button" value="Submit" name="B1"></p> </form> </body> </html> and below is my stylesheet: PHP Code: BODY { FONT: 8pt verdana, arial; COLOR: navy } TD { FONT: 8pt verdana, arial; COLOR: darkslateblue } .helphead { FONT: bold 16pt verdana, arial; COLOR: navy; TEXT-ALIGN: center } H2 { FONT-SIZE: 11px; FONT-FAMILY: verdana, arial COLOR: white } A:link { COLOR: navy } A:visited { COLOR: navy } A:hover { COLOR: #ff9900 } .funhead { FONT: 10pt Arial,Helvetica; COLOR: navy } .deschead { FONT: 600 10pt Arial,Helvetica; TEXT-ALIGN: center } .clsDescTab { BORDER-RIGHT: lightsteelblue 1px solid; BORDER-TOP: lightsteelblue 1px solid; BORDER-LEFT: lightsteelblue 1px solid; BORDER-BOTTOM: lightsteelblue 1px solid; BACKGROUND-COLOR: aliceblue } INPUT { BORDER-RIGHT: lightsteelblue 1px solid; BORDER-TOP: lightsteelblue 1px solid; BORDER-LEFT: lightsteelblue 1px solid; COLOR: navy; BORDER-BOTTOM: lightsteelblue 1px solid; FONT-SIZE: 11px; FONT-FAMILY: verdana, arial TEXT-ALIGN: left } SELECT { BORDER-RIGHT: lightsteelblue 1px solid; BORDER-TOP: lightsteelblue 1px solid; BORDER-LEFT: lightsteelblue 1px solid; COLOR: navy; BORDER-BOTTOM: lightsteelblue 1px solid; FONT-SIZE: 11px; FONT-FAMILY: verdana, arial } .button { BORDER-RIGHT: lightsteelblue 1px solid; BORDER-TOP: lightsteelblue 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: lightsteelblue 1px solid; WIDTH: 70px; COLOR: #000000; COLOR: navy; BORDER-BOTTOM: lightsteelblue 1px solid; FONT-FAMILY: verdana, arial; } TEXTAREA { BORDER-RIGHT: lightsteelblue 1pt solid; BORDER-TOP: lightsteelblue 1pt solid; BORDER-LEFT: lightsteelblue 1pt solid; COLOR: navy; BORDER-BOTTOM: lightsteelblue 1pt solid; FONT-SIZE: 11px; FONT-FAMILY: verdana, arial } Hi, Is it possible to remove the border from a select box? Many thanks |
|||||||