CSS - Cursor / I-beam In Text Field: Changing Color / Making Invisible
I am looking for a way (preferably using CSS) to make an I-beam or cursor inside a text field to become invisible. This may be achieved by changing its color to match the bgcolor, by making it invisible altogether, or even simply to get it to stop blinking (when the bg color is black). Any help would be appreciated.
Similar TutorialsI want to change the "flashing cursor" color in an input field in my css. This field has a dark background, the text over it is white but when you click in it, the flashing cursor is darkgray an almost invisible. Look in my login and password box, you will understand: http://www.jeudebourse.com. I'm mostly speaking in French and I don't know what is called this cursor. I don't mean the mouse pointer but the cursor that is flashing in the field to indicate your position in this field. Thanks. hi all ! I want to know how I can change the text size and color for a button created inside my page (only for the button the rest should remain the same). The data and button are created in PHP so it looks something like: Code: <div class="column3"> <div class="padding"> <?php if( $this->countModules('right') ): ?> <jdoc:include type="modules" name="right" style="xhtml" /> <?php endif; ?> </div> And css for that part of the page is: Code: #index .box .column3 {width:252px;} I'm missing something here. I want to change the color of the default value for this text field, without changing the overall color of the input field. For example, the default value of 170 will be gray, but when a user overwrites the data with their own numerical value, it will be black. I know how to change the color of the input field when a user types in data, but is there a way to change the color of the value= ? <input type="text" name="trans1_1" size="6" value="170"/> Any ideas? Seems like a simple task, but can't figure it out. Thanks in advance for the time. How would I change this to make list elements invisible? At the moment it just greys them out? div.sideBox ul li.disabled { display: block; padding: 2px 0 2px 7px; border-top: 1px solid #ccc; color: #777777; } So Id like to make the element basically like it doesnt exist. I dont want any spaces left over. Ive tried this div.sideBox ul li.disabled2 { visibility:hidden; } but it leaves an empty space. Hi, Is their any way to change the cursor color in css or javascript? Thanks Rishu I have a navigation list over which I want the cursor to change from vertical line to a hand. Has the hand cursor been deprecated? I tried Code: style.cursor='hand' with both onmouseover and onmousehover. Neither works. When you go near a link the cursor flickers and then goes back to default, cant get it to show normally for any link. Works on my windows PC but not on my Mac Even tried a{ cursor:pointer; } but the same thing happens... http://pd-scammell.co.uk/site/ Any ideas? Thanks. Is it possible to change the mouse cursor to a "hand" when hovering over a <input type="submit" /> ? Thank you Hello all, Site is here. As you can see, there are 4 links along the top. They are all images controlled by CSS. Here's the XHTML code I am working on: Code: <div id="logonav"> <ul> <li id="ln1"><a accesskey="k" href="./" title="To The Main Page"></a></li> <li id="ln2"><a accesskey="t" href="timeline/" title="A little about me"></a></li> <li id="ln3"><a accesskey="i" href="about/" title="Info about this little web space"></a></li> <li id="ln4"><a accesskey="c" href="contact" title="Contact Me"></a></li> </ul> </div> As you can see, there is NO actual value for the anchor: nothing. Well, the WAI-AAA validator doesn't like that. There has to be something there. The problem is that if I add text there it, of course shows up on the page. I don't want that, I want my images... So, can I add the text, but make it invisible somehow? I've played with transparencies a bit, but nothing's working. Anyone know any tricks? The CSS code that controls them is he Code: #logonav { background : url(./pix/MenuBar.jpg) no-repeat; height:40px; width : 780px; } #logonav ul { margin : 0; padding : 0; white-space : nowrap; list-style : none; } #logonav li { float : left; width : 130px; text-align : center; margin-left : 25px; } #logonav li a { font : bold 0.9em Arial, Helvetica, sans-serif; text-decoration : none; display : block; line-height : 26px; /* trick provided by trx */ height : 26px; } #ln1 a { background : url(./pix/home_off.gif) no-repeat; font : bold 0.9em Arial, Helvetica, sans-serif; text-decoration : none; display : block; line-height : 26px; /* trick provided by trx */ height : 26px; color : #B04F4F; } #ln1 a:visited { background : url(./pix/home_click.gif) no-repeat; } #ln1 a:hover { background : url(./pix/home_mouse.gif) no-repeat; } #ln2 a { background : url(./pix/time_bio_off.gif) no-repeat; font : bold 0.9em Arial, Helvetica, sans-serif; text-decoration : none; display : block; line-height : 26px; /* trick provided by trx */ height : 26px; color : #B04F4F; } #ln2 a:visited { background : url(./pix/time_bio_click.gif) no-repeat; } #ln2 a:hover { background : url(./pix/time_bio_mouse.gif) no-repeat; } #ln3 a { background : url(./pix/about_off.gif) no-repeat; font : bold 0.9em Arial, Helvetica, sans-serif; text-decoration : none; display : block; line-height : 26px; /* trick provided by trx */ height : 26px; color : #B04F4F; } #ln3 a:visited { background : url(./pix/about_click.gif) no-repeat; } #ln3 a:hover { background : url(./pix/about_mouse.gif) no-repeat; } #ln4 a { background : url(./pix/contact_off.gif) no-repeat; font : bold 0.9em Arial, Helvetica, sans-serif; text-decoration : none; display : block; line-height : 26px; /* trick provided by trx */ height : 26px; color : #B04F4F; } #ln4 a:visited { background : url(./pix/contact_click.gif) no-repeat; } #ln4 a:hover { background : url(./pix/contact_mouse.gif) no-repeat; } Just as an example, I'll add "Home" to the bar in red text. Bsaically, I figure that still has to be there, but invisible! How? Thanks! Chris Hi I've got a testpage, with everything removed except the problem which occurs in Firefox http://ied.gospelcom.net/tester.php There is a mouseover popup, which is toggled from hidden to visible by onmouseover on some of the table cells. The CSS for this is #reportalert {visibility:hidden;} This is not a javascript problem because it happens with js disabled. I have removed the JS toggle script from this page, so you won't even see this happen. As soon as I have the div with id="reportalert" anywhere on the page, its presence prevents a cursor appearing in the textarea. It does, in fact, have focus, because you can type in it. But it is disconcerting not to appear to have focus. It is as if the 'visibility:hidden' of the div somehow leaks out to affect the cursor. I have tried all sort of things, such as putting visibility:visible on the text area, or its whole TD. Any other ideas I could try? thanks Tony Hi im new, I've got a problem and I'm stumped as to why it's happening. I've got several lists on my page with link items. They all work fine, but when I hover over the links in my navbar in chrome and safari, the cursor turns to a text one rather than a hand. This means I can't actually click on the link. However, there are other lists on the page that work fine, and they all work in Firefox. Does anyone know why this is occurring? You can view the pages he andrewcharlton.co.uk/gaming_and_gambling2/ggbusinessplans.html (Can't seem to post a proper link as I am a new user) It's the about, contact links in the header that dont work. hmm. Would be grateful if anyone knows the answer. Thanks! Greetings I hope the title wasn't too confusing. If not this is sure to be. What I have is and Unordered List that has a heading in each List Item and then a few items under that. The List Items are links arranged in a grid that have a hover effect on mouseover. Due to the colors I want the heading (in this case h2) in each li to change color on the a:hover (the hover over anywhere on each li, not just over the h2 text). How can I achieve this? Here is some code to (hopefully) clarify: Code: #lower { width: 765px; float: left; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 10px; padding-top: 0px; padding-right: 0px; padding-bottom: 20px; padding-left: 0px; } #lower ul { width: 775px; list-style-type: none; margin: 0; padding: 0px; } #lower ul li { font-family: "Trebuchet MS"; font-size: 14px; width: 250px; float: left; } #lower ul li a { text-decoration: none; display: block; height: 125px; color: #262626; } #lower ul li a:hover { background-color: #5B8C3E; color: #D9D9D9; } #lower h2 { font-family: "Trebuchet MS"; font-size: 16px; margin: 0px; color: #262626; } #lower a h2:hover { color: #D9CE3F; } As is the h2 only changes when it is directly hovered, not the the li. Thanks in advance for your help. Ok I simply cannot figure this one out. All I'm trying to do is change the font color so that the text like "Choose a Username" is not black but white. Here is the link to the page http://www.technicalhypnotherapy.com/wordpress/?page_id=128 This is my CSS. I think the more relevant tags are the last ones. Code: /* Theme Name: Pixel Theme URI: http://85ideas.com/public-releases/wordpress-theme-pixel/ Description: Dark WP theme with 2-3 column layout, dropdown categories menu, multiple widget-ready placement and Feedburner email form integrated, easy to customize. Enjoy! Author: Sam @ 85ideas.com Author URI: http://85ideas.com/ Version: 2.0.2 Tags: black, blue, three-columns, two-columns, threaded-comments, fixed-width, theme-options, right-sidebar, sticky-post . Released under <a href="http://www.opensource.org/licenses/gpl-license.php">GPL</a>. . */ /* Defaults */ * { margin: 0; padding: 0; } :focus { outline:0; } h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 10px 0; } h1, h2, h3, h4, h5, h6 { font-family: Verdana; } hr { color: #333; border: 1px solid #121212; } pre { height: auto; overflow-x:scroll; } fieldset { margin: 0; padding: 0; border: 0; } dd { padding-left: 15px; } p { font-size: 9pt; } a { color: #6598b8; text-decoration: none; } a:hover { color: #222; text-decoration: underline; } a img { border: none; } blockquote { background: #070707; border: 1px solid #060606; padding: 5px 15px; margin: 10px 10px 5px 15px; font-style: italic; color: #fff; } code { color: #3366cc; font-style: italic; } strong { font-size: 110%; } body { text-align: center; margin: 0; padding: 0 0 15px 0; font-family: trebuchet ms, arial, helvetica, sans-serif; background: #000 url(images/bgbody.jpg) top center no-repeat; color: #eee; } /* Header and wrapper */ #wrapper { margin: 0 auto; width: 960px; text-align: left; padding: 0; } #header { padding: 0; margin: 0; height: 80px; text-shadow: 0 0 4px #555; } #header #topright { text-align: right; float: right; width: 930px; margin: 3px 0 0 0; } #header #topright ul { list-style: none; padding: 0; margin: 0; } #header #topright li { display: inline; } #header #topright li a { color: #fff; font-size: 9pt; padding: 0 0 0 25px; text-transform: lowercase; } #header #topright li a:hover { color: #ccc; text-decoration: none; } #header #logo { margin: 0; padding: 0; } #header h1 { padding: 0; margin: 0; } #header h1 a { color: #fff; font-size: 17pt; text-decoration: none; } #header h1 a:hover { color: #eee; text-decoration: none; } #header span { padding: 0; color: #eee; font-size: 10pt; } /* Menu */ #catnav { margin: 20px 0 0 0; padding: 0; clear: both; height: 44px; width: 960px; } #nav { list-style: none; margin: 0; padding: 0; } #nav ul { margin: 0; padding: 0; } #nav li { float: left; margin: 0; padding: 0; } #nav a { display: block; line-height: 44px; margin: 0; padding: 0 20px 0 15px; font-size: 10pt; color: #fff; letter-spacing: -1px; } #nav li a:hover { color: #6598b8; text-decoration: none; display: block; } #nav li ul { list-style: none; position: absolute; width: 150px; left: -999em; } #nav li:hover ul, #nav li.sfhover ul { left: auto; } #nav li li { float: left; margin: 0; padding: 0; width: 150px; } #nav li li a { width: 150px; height: 24px; line-height: 24px; color: #fff; border-top: 1px solid #131f27; background: #040404; margin: 0; padding: 5px 20px 5px 15px; } #nav li li a:hover { border-top: 1px solid #131f27; background: #000; padding: 5px 20px 5px 15px; } #nav li:hover, #nav li.sfhover { /* prevents IE7 drop-down menu bug (focus on a page element prevents nested menus from disappearing) */ position: static; } #toprss { float: right; margin: 10px 15px 0 0; display: inline; width: 65px; line-height: 41px; } /* Top Content */ #main { margin: 5px 15px 0 15px; clear: both; width: 930px; padding-bottom: 5px; } #contentwrapper { float:left; width: 560px; margin: 0 0 15px 0; padding: 0; } #contentwrapper2 { float:left; width: 900px; margin: 0 0 15px 0; padding: 0; } #contentwrapper .pageTitle, #contentwrapper2 .pageTitle { margin: 15px 0 10px 0; font-size: 14pt; letter-spacing: -1px; color: #fff; font-weight: normal; background: url(images/bg-trans.png) repeat; padding: 5px; } .topPost { margin: 0; padding: 0; font-size: 9pt; } .topPost h2.topTitle a { font-size: 15pt; font-weight: normal; color: #fff; letter-spacing: -2px; } .topPost h2.topTitle a:hover { text-decoration: none; color: #abd1ea; } .topPost p.topMeta { padding: 0; margin: -10px 0 0 0; font-size: 9pt; color: #cdcdcd; } .topPost p.topMeta a { text-decoration: none; color: #fff; } .topPost p.topMeta a:hover { color: #ccc; text-decoration: underline; } .topPost div.topContent { font-size: 9pt; color: #efefef; margin: 8px 0; } .topPost div.topContent p { font-size: 1.05em; line-height: 1.6em; } .topPost div.topContent a { text-decoration: underline; color: #fff; } .topPost div.topContent a:hover { text-decoration: underline; color: #ff9933; } .topPost div.topContent ul, .topPost div.topContent ol { padding: 0 0 0 30px; } .topPost div.topContent ul li, .topPost div.topContent ol li { font-size: 1.05em; color: #eee; } .topPost span.topComments, .topPost span.topMore, .topPost span.topTags { font-size: 9pt; font-style: italic; background: url(images/bg-trans.png) repeat; padding: 8px 10px; margin-right: 5px; line-height: 27pt; color: #fff; border: 1px solid #111; } .topPost span.linkpages { font-size: 9pt; font-style: italic; color: #fff; margin-bottom: 10px; display:block; } .topPost span.linkpages a:hover { color: #ddd; } .topPost span.topComments:hover, .topPost span.topMo hover, .topPost span.topTags:hover { background: #040404; } .topPost span.topComments a { color: #fff; background: url(images/comments.gif) left no-repeat; padding-left: 20px; line-height: 27pt; vertical-align: middle; } .topPost span.topMore a { color: #fff; background: url(images/more.gif) left no-repeat; padding-left: 20px; line-height: 27pt; vertical-align: middle; } .topPost span.topTags em { background: url(images/tags.gif) left no-repeat; padding-left: 20px; line-height: 27pt; vertical-align: middle; color: #0a0a0a; } .topPost span.topTags a { color: #fff; line-height: 27pt; vertical-align: middle; } .topPost span.topComments a:hover, .topPost span.topMore a:hover, .topPost span.topTags a:hover { color: #fff; text-decoration: underline; } #nextprevious { margin: 10px 0 5px 0; } #nextprevious a { color: #eee; text-transform: lowercase; border: 1px solid #111; padding: 5px 8px; font-size: 10pt; line-height: 1.4em; } #nextprevious a:hover { color: #fff; } /* Comments */ #comments { margin-bottom: 10px; margin-top: 15px; background: #040404; width: 530px; /* fixes bug in IE7 where putting focus on the text makes it disappear behind the background. yeah, weird. they call it a dimensional bug. */ border: 1px solid #090909; padding: 0px 15px 10px 15px; color: #fff; } #comments h3 { font-size: 10pt; font-weight: normal; color: #fff; margin: 15px 0; padding: 0; } #comments p a { color: #6598b8; } #comments p a:hover { color: #fff; } #comments p { padding:0; margin: 7px 0; } ul.commentlist, ul.trackback { list-style-type: none; margin: 10px 0; font-size: 9pt; } .commentlist li, .trackback li { margin: 10px 0 15px 0; padding: 10px; background: #080808; border: 1px solid #040404; list-style-type: none; } .commentlist li.alt { background: #000; border: 1px solid #020202; border: none; margin-top:10px; } .commentlist li.cleared { background: transparent; border: none; } .commentlist a:hover { color: #eee; } .commentlist a.gravatar { float: left; margin: 0 15px 10px 0; width: 60px; } .commentlist .commentbody { margin: 0; padding: 0; } .commentlist .commentbody p a { text-decoration: underline; } .commentlist cite { font-size: 10pt; font-style: normal; color: #ddd; } .commentlist small.commentmetadata a { color: #666; } .commentlist p { color: #dedede; } #respond { clear: both; margin-top: 15px; } textarea#comment { width: 450px; background: #fff; color: #111; padding: 10px; } #comments #submit { margin: 0; } #extrastuff a {color:#999; font-size:0.8em;} #extrastuff a:hover {color:#6598b8; text-decoration:none;} #extrastuff #rssleft {float:left; width:250px;} #extrastuff #trackright {float:right; width:180px; text-align:right;} /* Welcome section */ #main #welcome { margin: 0 0 20px 0; padding: 0 0 5px 0; background: url(images/bg-trans.png) repeat; } #main #welcome h2 { font-size: 14pt; font-weight: normal; color: #fff; letter-spacing: -2px; margin: 0 10px; padding: 10px 0 3px 0; } #main #welcome p { font-size: 9pt; color: #eee; margin: 0 10px; padding: 6px 0; } #main #welcome a { text-decoration: underline; color: #ff9933; } #main #welcome a:hover { color: #6598b8; } #main #welcome form { margin: -5px 0 0 0; background: transparent; /* required for IE */ } #main #welcome #feedbox { border: 1px solid #ccc; padding: 2px 1px; width: 180px; } .submitbutton { margin: -5px 0 0 5px; background: #010101; color: #fff; font-size: 8pt; padding: 3px 6px; vertical-align: middle; border: 1px solid #111; } .submitbutton:hover { cursor: pointer; background: #050505; } /* Sidebars */ #sidebars { margin: 15px 0 0 0; float: right; width: 340px; color: #eee; } #sidebars .sidebarbox { background: url(images/bg-trans.png) repeat; padding: 8px 15px; } #sidebar_full { padding: 0; margin: 0; } #sidebar_left { float: left; width: 160px; } #sidebar_right { float: right; width: 160px; } #sidebars h2 { margin: 0; padding: 0 0 8px 0; font-weight: normal; font-size: 11pt; color: #fff; letter-spacing: -1px; } #sidebars table { width: 130px; } #sidebars ul { margin: 0; padding: 0 0 5px 0; } #sidebars li { margin-bottom: 20px; list-style: none; font-size: 9pt; } #sidebars li ul { padding: 0; } #sidebars ul ul li { margin: 0; padding: 2px 2px 2px 16px; color: #eee; background: url(images/bullet.gif) left 8px no-repeat; line-height: 17px; /* Required for cross-browser consistency; cross-browser defaults vary. */ } #sidebars a { display: inline; color: #eee; } #sidebars a:hover { color: #6598b8; text-decoration: underline; } #sidebars p { padding: 2px 0; font-size: 9pt; color: #eee; } #tag_cloud a { display: inline; } #sidebars ul.children li {border-bottom:none;} #sidebars ul.children {margin-bottom:0;} /* Before footer */ #morefoot { background: #000 url(images/bggrad.jpg) top left repeat-x; border: 1px solid #070707; padding: 15px; color: #dfdfdf; margin: 0 0 10px 0; } #morefoot p { margin: 5px 0; padding: 5px 0; } #morefoot ul { list-style-type: none; margin-top: 5px; } #morefoot ul li, #morefoot p { font-size: 9pt; } #morefoot a { text-decoration: underline; color: #ddd; } #morefoot a:hover { text-decoration: underline; color: #6598b8; } #morefoot h3 { font-size: 12pt; font-weight: normal; color: #dfdfdf; letter-spacing: -1px; border-bottom: 1px dotted #444; margin: 0; padding: 0 0 2px 0; } #morefoot #searchbox { padding: 1px; width: 180px; } #morefoot .col1 { float: left; width: 340px; } #morefoot .col2 { margin: 0 25px; } #morefoot .col2, #morefoot .col3 { float: left; width: 260px; } #morefoot li { padding-left: 20px; margin-bottom: 5px; background: url(images/more.gif) left 2px no-repeat; line-height: 17px; /* Required for cross-browser consistency; cross-browser defaults vary. */ } /* footer*/ #footer { clear: both; background: #000; border: 1px solid #070707; padding: 15px 15px 10px 15px; } #footer p { font-size: 9pt; color: #bbb; padding: 0; } #footer a { color: #bbb; text-decoration:none; } #footer a:hover { color: #fff; } #footerleft { float: left; width: 500px; } #footerright { float: right; width: 300px; text-align: right; } /* Misc */ .highlight { color: #222; font-weight: bold; } .cleared { margin: 0; padding: 0; clear: both; } .alignleft { float: left; margin: 10px 15px 5px 0; } .alignright { float: right; margin: 10px 0 5px 15px; } .aligncenter, div.aligncenter { margin: 10px auto; text-align: center; display: block; } img.alignleft { float: left; margin: 10px 15px 5px 0; } img.alignright { float: right; margin: 10px 0 5px 15px; } img.aligncenter { margin: 10px auto; text-align: center; display: block; } .wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; /* optional rounded corners for browsers that support it */ -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .wp-caption img { margin: 0; padding: 0; border: none; } .wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0; color: #111; } #reg-form .formleft { background: none !important; color: #fff;} #account-form { background: none !important; color: #fff;} hi, iam having a div tag in that div i have table.. <div style="width:658;height:265px; overflow:auto;" > <table> </table> </div> now i need to change the color of scroll bar of this div tag. i tried with this the css .myScrollBar { scrollbar-face-color: #FF0000; scrollbar-shadow-color: #0000FF; scrollbar-highlight-color: #00FF00; scrollbar-3dlight-color: #FF00FF; scrollbar-darkshadow-color: #00FFFF; scrollbar-track-color: #FFFF00; scrollbar-arrow-color: #000000;} <div style="width:658;height:265px; overflow:auto;" id='myScrollBar'> but its not working.. Regards, I'm not sure if this belongs in the javascript or Css forum. because it uses both. But my problem is that on mouseover my background color changes to what I want, but the font-color is not changing. Here is a snippet of my code: Code: <tr class="clickableTROpt1" onmouseover="this.className='cellover'" onmouseout="this.className='clickableTROpt1'" onClick='location.href="searchResults.php?id=2"'> <td><a href="#">Some data cells</a></td> </tr> my css file looks like this: Code: .clickableTROpt1{ font-weight: bold; cursor: pointer; background-color: #FFFFFF; } .cellover{ color: #FFFFFF; background-color: #CCCCCC; font-weight: bold; } it looks like my css needs to be told to apply the changes to <a> tags as well? Is there a way to tell the browser not to change the color of a visited link? I have an anchor around some text, but I don't know the color setting of the text. When I visit the link, I just want the text to retain its color based on the other CSS declarations in effect for the text. So, is there a way to specify a:visited { color: do-not-change; }? How can I use CSS to specify the color I want for the image borders on the page? Hi, How to change the background color of textbox in css, so that negative numbers can be shown in red color I have multiple textbox in my asp page, which gets values from database. So there is a negative value shown, I want to highlight that in red color. How to achieve this? Thank you hey, i have a question regarding css on my website: http://poolghost.com/ my css file is located at http://poolghost.com/base.css basically what i am trying to accomplish is having a:hover's color change to a different color on the right side of the layout. and i would like links on the right side to be underlined. please advise.. thanks, --avery Okay, so I'm having a little bit of a problem with setting the background color through an onClick event on an option tag. Here is what I mean. Code: <div id = "move"> <form name = form2> <span style="float:left;"> <select name= theDay size=1> <option value=0 selected>Default [themes] <option value=1>White</option> <option value=2 onClick = "red()">Light Blue</option> <option value=3>Aqua <option value=4 value = "document.body.style.backgroundColor= '#98AFC7';">Lighter Blue</option> <option value=5 onClick = "document.body.style.backgroundColor= 'white';">Saturday</option> <option value=6 onClick = "document.body.style.backgroundColor= 'white';">Sunday</option> </select> When I click one of the options, nothing changes, although I set the body.style.backgroundColor to register to a different color when the option tag is clicked. Any ideas? |