|
CSS - Make The Arrow On A Drop Down Box A Different Colour?
Hello. On my website 2uk2 there is a domain search in the header. I want to make that litle arrow on the domain extension box purple. Using normal CSS i cant seem to acomplish it, i have tried assigning a "class" to the box, but it has no affect on it, it only sets the background colour. I have the scrollbar colour defined aswell, but again, no affect..
If anyone knew how i could fix that I'd really appreciate it! Regards Steven Billings Similar TutorialsWhen you make a normal drop down menu in a form tag you get your text field and then that small grey box with the down arrow in it. Is it possible to change that grey colour to some other colour? Thanks. I've inherited some custom code and I'm working on getting a drop down arrow graphic to show up... I can get it to show up but it is forced to the left of the drop down. So I have: V |___drop down/select list____| Here is my CSS controlling the dropdown: PHP Code: .dropdownplatform_game { background: url("../images/drop_down18.png") no-repeat scroll 0 0 !important; width: 230px; height: 20px !important; cursor: pointer !important; margin: 0 0 0 30px; } I've tried background: right and background-position: right and when I do that the drop down arrow graphic disappears. Am I missing something simple here? Here is the PHP code for the drop down/list box: PHP Code: <div id="dropdown" class="dropdownplatform_game" onclick="show_dropdown('platform');"> <input id="platform" name="platform" type="text" autocomplete="off" readonly value="<?php echo JText::_('PLATFORM')?> *" size="13%" class="survey_search_inputbox" /> <ul id="dd_list_platform" class="dd_list_game"> <?php for ($i = 0; $n = count($platforms), $i < $n; $i++) { $platform = $platforms[$i]; ?> <li onclick="changeValText('<?php echo $platform->id?>','<?php echo $platform->name; ?>','platform');"> <?php echo $platform->name; ?> </li> <?php } ?> </ul> </div> Works great other than the arrow graphic not lining up. Hi, How do i change the colour of the background hover colour of a drop down menu? I can only seem to change the background of the normal state. Any ideas? Sorry if I ask this once before 'cause I don't remember which hack is it for, IE or non-IE... What's the difference between those two below?? Code:
html>#wrapper {HEIGHT: auto;}
Code:
* html #wrapper {HEIGHT: 100%;}
Thanks, FletchSOD Hey, so I have a div section where I want links to go, which all have an arrow image before them. I want a bit of space after the image too. Whats the easiest way to set this up? Thanks! I need help. I want to change the style and errow of list list Menu . Here is HTML CODE: HTML and CSS Syntax : Code: <select id="el01"> <option selected>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> Here is CSS Code: HTML and CSS Syntax Code: #el01 {width:135px; border:1px solid #000000; height:18px} /* Width */ #el02 { /* Text and background colour, blue on light gray */ color:#00f; background-color:#990000; } #el03 {background:url(listmenu.jpg)} /* Background image */ /*#el03 {background-image:url(listmenu.jpg)}*/ /*#el04 {border-width:6px}*/ /* Border width */ #el05 {border:9px dotted #00f} /* Border width, style and colour */ #el06 {border:none} /* No border */ #el07 {font-family:"Courier New",Courier} /* Different font */ #el08 {font-size:2em} /* Bigger text */ #el09 {font-size:0.5em} /* Smaller text */ #el10 {font-weight:bold} /* Bold text */ #el11 {padding:1em} /* Increase padding */ #el12 {text-align:right} /* Change text alignment */
Know i want to change the errow to my designing errow. I want this through CSS, no Jquer involved.I am attaching the image that u want to use . I want to replace default errow image to mine in which two errow pointing up and down. Please help me. Hobby Helper Model Trains The above link is where my problem is... If you look at the middle column running down the page, there are several text links that I have the CSS working nice with the background color changing to orange. There is an arrow image that should follow the mouse as I run over these text links, but can't figure out how to get the darn thing to move. Any help will be GREAT!! THANKS! I'm having trouble with my list on a site im working on. When you hover over the link, I want it to display a background colour the full width of the box, not just the length of the text. You can see the menu, on the left hand side - HERE. Here's the CSS of the list. Code: div #leftcontent {
padding-left: 0px;
padding-top: 0px;
display: block;
font-size:90%;
font-family:Arial, Helvetica, sans-serif;
}
#leftcontent a {
text-decoration:none;
padding:0px;
color:#000066;
}
#leftcontent a:hover {
text-decoration:none;
background-color:#66CCFF;
background-color-width:30px;
}
#leftcontent ul{
margin: -10px 10px 2px 5px;
padding: 0;
list-style: none;
}
#leftcontent li a{
margin: 0 0 .5em 0;
padding: 2px 5px 5px 0px;
line-height: 1.4em;
font-size:100%;
color:#FFFFFF;
}
Any help is appreciated. Cheers. __________________ ULTRASUK 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. Is there any way to: a) Change background color of the title box that appears when you hover over an image AND b) Reduce the delay it takes to appear? Thanks. Is it possible to set the colour of the padding in a table cell? Hi, im trying to create a block of colour of various width. Im trying to do it with <span> like so <span style="background-color:#336699; width:100px"></span> Now why wouldnt that work and is there a better way to do what im trying to achieve? I'd like to be able to have different hover colours for different table rows. I have a general hover colour for the whole page and I'd like to have a different hover colour for the table rows. In the head I have a:hover { color: green } a.white:hover { color: white } So by hand I can insert the class="white" to each individual cell as part of the link but what if I wanted a whole row to hover white? How would I code this or is there still no way to do it? i currently have the following code for links.. Code:
a {
color:#666666;
font-size:11px;
text-decoration:none;
font-weight:600;
font-family: arial, helvetica, sans-serif;
}
a:link {color:#666666;}
a:visited {color:#333333;}
a:hover {background-color:#eee;}
is there a way of having another set so that some have the colour settings as above and another set have the colour settings that are blue or something??? any suggestions would be great.... thanks RF 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. At http://jordanmeeter.com/contact/form you'll see that I have a form. After you submit the form, it will display "Success! Your Email has been sent." in green text. Now why is it displaying green when in the HTML, I have <strong style="color:rgb(84, 172, 219);">Success! Your Email has been sent.</strong> (That RGB equals a blueish colour) But if you highlight the text, and use Firefox's "View selection source" it will appear as style="color:green;" . What the heck is overriding my CSS? Is there a way to get it so that if images dont load, then it shows a background colour I tired using both colour an image, but it didn't work Code: background: url(images/background.png); background:#000000; The reason i'm asking is when i'm at college, i have images disabled, and because i used white text, i have to highlight the text in order to read it Is there a way to do this Hi all, the page i am talking about is... http://sydneynightowl.com.au/home.php The problem is the the div 3column seems to start too early in the work flow and also the background colour on the header bleeds. The div and header should be starting after the first 3 divs (which are set to float) I hope i have explain this correctly, any help is apriciated. The css code is Code: @charset "utf-8";
/* CSS Document */
body {background-color:#000000;
background-image: url(../images/background.jpg);
background-repeat:no-repeat;
background-position:center top;
color:#FFFFFF;
font-family:"Lucida Sans Unicode", sans-serif;
font-weight:100;
font-size:12px;}
#container {
position:absolute;
width: 700px;
left:50%;
margin-left:-358px;
}
#header {
margin-top:0px;
height: 115px;}
#toolbar {height: 30px;
line-height:10px;
padding: 0px 10px;
font-variant:small-caps;
}
#cornerlogo {
position:fixed;
top:5px;
left:5px;
}
#topnavigation {height: 35px;
line-height:35px;
text-align:center;}
#content { border-bottom:1px;}
.3column {width:695px;
padding-right:5px;
padding-left:5px;
margin-top:5px;}
#leftcolumngl {float:left;
width:223px;
height:370px;
padding-right:5px;
padding-left:5px;
padding-top:5px;
margin-top:15px;
margin-right:5px;
border:#FFFF00 solid thin;}
#middlecolumngl {float:left;
height:370px;
width:225px;}
#rightcolumngl {float:left;
height:370px;
width:230px;
padding-left:5px;}
#leftcolumn { float:left;
width:230px;
padding-right:5px;}
#middlecolumn {float:left;
width:230px;}
#rightcolumn {float:left;
width:230px;
padding-left:5px;}
#imagecolumn {float:left;
width:340px;
padding-left:5px;}
#infocolumn {float:left;
width:340px;
padding-left:5px;}
#footer {height: 30px;
border:thin solid #FFFFFF;
clear:both;
text-align:center;
margin-bottom:30px;
margin-top: 30px;
line-height:25px;}
#bgfirst {
position:absolute;
top:190px;
left:0px;
width:90%;
height:200px;
margin-bottom:20px;
background-color:#00CC00;
}
#bgsecond {position:absolute;
top: 400px;
right:0px;
width:90%;
height:200px;
background-color:#660066;
}
a:link {color: #fffc00; font-weight: normal;}
a:active {color: #fffc00; font-weight: normal;}
a:visited {color: #fffc00; font-weight: normal;}
a:hover {color: #fffc00; font-weight: bold;}
a.event:link {color: #fffc00; font-weight: normal;}
a.event:active {color: #fffc00; font-weight: normal;}
a.event:visited {color: #fffc00; font-weight: normal;}
a.event:hover {color: #fffc00; font-weight: bold;}
a.club:link {color: #fffc00; font-weight: normal;}
a.club:active {color: #fffc00; font-weight: normal;}
a.club:visited {color: #fffc00; font-weight: normal;}
a.club:hover {color: #fffc00; font-weight: bold;}
h1 { text-align:center;
color:#000000;
background-color:#fffc00;
margin-left:3px;
margin-right:3px;
font-variant:small-caps;
font-size:22px;}
h2 {text-align:center;
color:#fffc00;
background-color:#333333;
margin-left:3px;
margin-right:3px;
font-variant:small-caps;
font-size:18px;}
.ourprice {
display:inline;
color:#FF0000;
line-height:20px;
font-variant:small-caps;
font-size:14px;}
img {
border-color:#fffc00;
border-style:solid;
border-width:thin;
}
img.noborder { border:none;}
img.venues {float:left;
margin:10px;}
.mainnavimages {
border-color:#979700;
border-style:solid;
border-width:thin;
}
p {line-height:15px;}
strong { color:#fffc00;}
Is it possible to include (in this instance) a white border, INSIDE an orange background colour on a h1. The background colour of the page is white and the background colour of the h1 is orange, so I need the border inside rather than around the h1 bg colour for it to work otherwise you wouldn't see it for the white page background. Can this be done? If so can anyone help.. Thanks. |
|||||||