|
CSS - Controlling Disabled Text Inputs
When a Text Input is disabled, is there a way to control the visual characteristics such that it's not as subdued, or use different colors for the text / background?
Similar TutorialsNot 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.. another question for the CSS mastas out there. I have a table taht I have applied a class to: PHP Code: <table class="middle" cellspacing="0" cellpadding="0" border="0"> <tr> <td> <img border="0" src="images/spacer.gif" width="1" height="1"> </td> <td align="left"> <p class="customHeading">aaaa</p> </td> <td> <p align="right"> <a class="importantLink" href="">aaa</a> | <a class="importantLink" href="">aaa</a> | <a class="importantLink" href="">aaa</a> </p> </td> </tr> <tr> <td colspan="3" valign="top"> <table class="content" cellspacing="0" cellpadding="0" border="0"> <tr> <td align="left">aaa:</td> <td><input type="text" name="aaa" size="22" class="formField"> </td> <td><a href="#"> <input type="submit" value="SEARCH" class="formButton"> </a> </td> </tr> </table> </td></tr></table> .middle { width: 760px; height: 360px; background-color: #FFFFFF; } .content { background-color: #FFFFFF; font: 13px Arial, sans-serif; padding: 2px; margin-left: auto; margin-right: auto; } The issue I'm having is that I can't seem to control the height of the outside tables first row. It seems to just take on a size depending on how I set the height in the element. Can I not place a height tag in the <td>'s for that row to set it at a fixed height? is there a way using css to control how much space is below and above a form button, because I have a lot of form buttons and the space between them is killing my design. Thanks Im trying to control how the text formats within a div tag, that sits inside a menu. The text appears when you rollover the items in the submenu and I want extra information to appear but when it does, it doesnt wrap 'correctly' I have the menu sitting he http://www.electronical.org/tmp/playsongs/ If you rollover 'Products > playsong titles', you will see some blue text appears at the bottom of the submenu. How do I format this so it is the width of the submenu and wraps to the length of it? Thanks for any help. Has anyone seen a template somewhere that can help style a page for printing to an index card? Thanks, James Okay, I tried to see if this question was already answered on the forums, but I got ADD so I gave up. I'm making a nav bar out of a list and CSS. The bar is perfect, except for the height will not extent each extremity. Here's the CSS: Code: .navigation {
width: inherit;
height: 53px;
margin: 0px;
margin-top: 63px;
background-image:url(file-bin/images/navigation_background.png);
background-repeat:repeat-x;
background-position:center;
}
.navigation ul, .navigation li {
display: inline;
list-style:none;
padding:0px;
margin:0px;
}
.navigation li a {
border-left: 1px solid #FFF;
padding-left: 20px;
padding-right: 20px;
text-align: right;
}
Here's the HTML: Code: <div class="navigation" align="right"> <ul class="navigation"> <li></li> </ul> <ul class="navigation"> <li><a href="#"><img src="file-bin/images/space.png" height="53" width="1" align="absmiddle" border="0" />Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </div> Thanks for the help in advance! - Logan I'm trying to determine the best way to design a UI for a PHP application. There is a header portion with menu choices and a footer portion. There is also a background image 'picture frame' that sits in between the header menu and footer and gets loaded depending on the user's preferences. None of these three scroll. Within that picture frame, there is a center screen with a scrolling application. This portion would load different screens based on what was picked as a menu choice, and the user would scroll in the application if the particular screen were longer. Is the best way to do this using frames, or is there a better choice in terms of speed, browser compatibility, etc.? Thanks for your suggestions. Hello: I'm building a website for a broad audience. I need there to be an option for text to be resized for those who have trouble with reading screens. I am trying to have the text on HTML pages be changeable through CSS. Two examples I offer are 1. wired.com 2. 1and1.com On the top right corner of the screen, there are options to change the text size without switching to a new HTML page. I believe this is done using CSS (perhaps Live StyleSheet Selector). I'm not really sure. I would like for the user the have the option to change the font-size by clicking, not by repositioning the window (then the size changing relative to window size). If anyone can help me, I would really appreciate it. Thanks! Deanna In a simple vertical list, the bullets are offset to the right of the container. Is it possible to control the amount of offset? hi guys, silly question i want to make a certain portion of my text smaller, but when i put a span like this around it: <span style="font-size: 10px;"> then only the plain text, and not the links, decrease in size... what should i add? thanks glog I want to know how I could possible control all the elements inside a table that is inside a div with an id. This is possible correct? So if I have: Code:
#header { width: 900px; }
And then something like this: Code: <div id="header"> <table> <tr> <td> </td> </tr> </table> </div> I'd like to then have something like: Code:
#header.table,td {padding-left: 10px;}
Which I am hoping would put a 10px padding on all the td's in the table and nothing else. Is my syntax right? Hi, I am using a javascript drop down that does include CSS to control the font style, size etc. It works great in IE. Mozilla is ignoring all CSS, both in the js code and my style sheet, when I change the text size via View/Text Size in the top menu bar of the Mozilla browser). How do I get Mozilla to bow down and take it (the code, that is ) Just to note, I have tried adding the CSS info from the javascript to my style sheet. No different results. Thanks! Ok, don't blame me if this looks like a bad idea as it's not my code. I just have to make it work. Our navigation is basically a div that has a background which is three times the height of that div (and the background file contains different versions of each button or so I am told). Our code is below. We want to have a div behind the menu that will obviously show up if images are disabled but I can't get it working. Presumably because the nav div uses a background file and is not actually filled. Code: PHP Code: <div id="mainmenuText">text links to go below...</div> <div id="mainmenu"> <ul id="mainmenulist"> <li id="menu_homepage"><a href="index.php" title="Homepage" name="Homepage">Homepage</a></li> <li id="menu_apartments"><a href="apartments.php" title="Apartments" name="Apartments">Apartments</a></li> <li id="menu_villas"><a href="villas.php" title="Villas" name="Villas">Villas</a></li> <li id="menu_prices"><a href="prices.php" title="Price Matrix" name="Price Matrix">Price Matrix</a></li> <li id="menu_contact"><a href="contact.php" title="Contact Us" name="Contact Us">Contact Us</a></li> </ul> </div> CSS: PHP Code: #mainmenu { z-index:1000; height: 20px; background: transparent url("../images/layout/navigation.jpg") no-repeat top left; margin-left: 0px; } #mainmenuText { z-index:10; width:100%; height:100%; position:relative; top:10px; display:block; margin-left: 0px; } I am using a CSS with my forms, including setting the color and text font for the <INPUT> buttons. However, if the button is disabled, the colors revert to system default. I've tried but can't seem to set the color if the button is disabled. Is it even possible? Thanks, Hi folks. I am in the process of creating a feature in our Web application to allow users to create and manage a set of simple HTML email templates. At the bottom of my editor screen I show a preview of the formatted email (with the text and HTML entered into a textarea field). My problem is that when I output the preview to the Web page, it inherits all the styles from the parent page (for example an <h1> header has colors and special spacing, etc.). Is there a way to temporarily disable then re-enable the CSS styles defined in the header of the page so I can draw the "preview" with default browser CSS styles which will reflect more what an eMail program would look like? I am not sure if this can be done. If it could, it would be awesome and save me from having to code a special preview page or iFrame for the email template. Hi I have a page I am putting together and everything is fine until I take off js in ff. Then I get this small gap between the code thats would have gotten replaced by flash if js was enabled. Its right below the menu. If you could take a look at http://www.bostonredhat.com/menu.php with js enabled and with it disabled for me and let me know if you see any problems I am missing I would appreciate it. Thanks. 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. This was bugging me for a while last week, devshed and google weren't helping much so I wrote my own. Basically if you're trying to get a Javascript enabled site to degrade then instead of writing a clumsy function to walk the DOM and "activate" your funky UI elements just document.write a CSS style block. Mind numbingly simple... and it works: Link: http://www.cyclomedia.co.uk/?40 Code: Code: <head>
<link rel="stylesheet" type="text/css" href="javascript_disabled.css">
<script type="text/javscript">
if( document.getElementById )
document.write('<' + 'link rel="stylesheet" type="text/css" href="javascript_enabled.css">');
</script>
</head>
www.cyclomedia.co.uk - ASP, CSS and AJAX demos, examples and tutorials with free source code download This is a small thing, but it's kind of annoying. I'm using CSS to make some buttons on my site purty. And they are purty. The problem comes in when I set a buttons state to "disabled". IE o' so nicely makes the button "grayed out". Mozilla browsers do squat. Observe he http://www.drcwbt.com/codetests/disabledbutton.htm I was hoping I might be able to skirt around this problem with the pseudo class ":disabled" but it appears that this is too new still and nobody supports it. Any ideas on how to "gray out" in Mozilla? Is there a way to detect if the browser have disabled CSS? That way, I can redirect users to another page explaining that website won't function with his/her browser with disabled CSS. |
|||||||