|
CSS - Css And Select
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 Similar Tutorialshi 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... 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? 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"> 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 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 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 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 } I need to know how to format a selection list, what I want to do is change the color of the arrow how do I do this? Tim 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 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. i want to make a select box... and attempt to make its background transparent... slightly showing a background image... i have seen this done with search boxes before. 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! Hello, I am trying to make a select box (align:left) with link text (align:right) inline. I don't know what the best method would be to do this. I tried using li but it doesn't seem to be working. It looks like it should be simple but for the love of me... it's not working. Can you please show me how? Hi. I have a form in a php script where among other fields the visitor picks a color from a select tag. I can manage the select list with the following code: <option style={background:red;} value=1>red</option> <option style={background:yellow;} value=1>yellow</option> ...and so on... but when I use the select to pick a color the browser highlights my selection using blue color. The problem is that this blue overwrites my color so the visitor can see all the other colors but not the one he is choosing ... Is there a way to control the highlighting color of the select tag? Sorry if this has been answered before... i couldn't find an answer... In my website (geotool.flagfox.net) I have a drop-down menu which allows people to change to locale of the website. If you look at this menu you can see that I have placed flags next to each country, but as I now have 35 different languages I don't really want to load 35 separate images (especially as most visitors never even look at this menu). Is there a way of using CSS sprites for this? I've made a small test website to make it easier to look at this: test.rleeden.no-ip.com. You can see that I can successfully use a CSS sprite image in the main body, but I've not been able to achieve the same affect in the select menu. Or alternatively somehow make it that the images are only downloaded if the menu is shown?? Any advice or help most welcome. Richard Hi, I am trying to create a combo box with horizontal scroller. i.e. Combo box will have a fixed width, if any of its options have higher text, then horizontal scroller should appear automatically. I also tried placing a <div> around <SELECT>. But not getting how to apply styles on it. Any suggestions will be helpful. Thanks Hello! I have a little bit of a problem. I'm trying to create a drop down with a fixed width, but have the options be a flexible width (in other words, it flexes with the content. It works just fine in Firefox and Chrome, but surprise, surprise, IE cuts it off. Is there anyway to trigger word break or something in IE? I tried a line break and that didn't work either. Thanks for any input! 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! 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 |
|||||||