I'm trying to get a button which looks exactly the same whether it is enabled or disabled, but whenever I disable the button it seems to ignore any font styles I have set. This seems to be the case in IE but not other browsers.
So does anybody know the CSS to change a disabled button so that the font is not embossed?
Thanks in advance,
Chris
[Edit]
The CSS is as follows:
.Button
{
background-color:#332F27;
border-bottom-color:#1B1B1B;
border-top-color:#3B3B3B;
border-left-color:#3B3B3B;
border-right-color:#0C0C0C;
color:Black;
font-style:normal;
}
The button has the attribute Class="Button"
[/Edit]
If you are changing the disabled property of the button then you won't be able to get the feel and look of a normal button with CSS which will work in all browsers.
The easiest way is to add another button with no click event attached to it and set this button's display to inline and hide the original one.
If you still want to use CSS for this you can refer this link.
Styling disabled form controls with CSS
//You use this css it helps u
font-weight: bold;
border-right: #3C8FD1 1px solid;
border-top: #3C8FD1 1px solid;
border-left: #3C8FD1 1px solid;
border-bottom: #3C8FD1 1px solid;
font-size: 10px;
color: #045FA7;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
background-image: url(../App_Images/cssbuttonbg.gif);
line-height: 14px;
Related
I'm trying to style the font in an input button as bold.
Here's my code:
<input type="submit" id="nm-match" class="nm-button" value="Match" />
Here's my CSS:
.nm-button {
text-transform: uppercase;
padding: 5px;
color: blue;
font-weight: bold;
}
All the styles are being applied apart from the bold.
Here's a JSFiddle showing the problem: http://jsfiddle.net/CJg43/1/
UPDATE: Why the close votes? Here's a screenshot of how it looks for me, in Chrome on MacOS:
UPDATE 2: ... and for comparison, here's how it looks with the solution (background-color: white) applied - http://jsfiddle.net/CJg43/23/
Are you using chrome for a MacOS? If so, try adding a background-color to the button to see if it fixes it. The default Aqua styles might be interfering. You can also try -webkit-appearance: none; or -webkit-appearance: button;.
When you use numeric values with the font-weight property and you want to use bold then use the value greater than or equal to 700
.nm-button {
text-transform: uppercase;
padding: 5px;
color: blue;
font-weight: 700;
}
Js Fiddle Demo
Yahoo keeps inserting blue dotted links within our HTML emails on plain text within a <p> tag. It seems to be doing this to locations mostly.
I've tried to override this using inline styles like:
style="font-family: arial, helvetica, sans-serif; color: #808080; font-size: 8pt; text-decoration:none; outline: none; -moz-outline-style: none;"
I've done a bit of research on this and it seems like it may not be possible to remove them, but I'm just looking to confirm that.
Have you tried adding the following to the CSS before </head>:
.yshortcuts {border-bottom: none !important; color: #000000 !important}
There is a little bit more info on this over at Exact Target's blog.
My website - http://www.automated-stores.com has the strange feature of a blue-ish background for text areas, seen more specifically here: http://www.automated-stores.com/vending-machines-business-electronics-cosmetics-perfume
I didn't code the website, but I suppose that to change this it would have to be in the stylesheet.css, does anyone know what code to enter/change?
I thought it would be this:
input,textarea,select {
padding: 1px;
border: solid 1px #000000;
font-size: 10pt;
color:#000000;
background-color:#ffffff;
}
(the colours were different before) but I have changed it several times with no effect.
I looked through your source code and you need to find your style.css under your root and change this:
input,textarea,select {
padding: 1px;
border: solid 1px #5c8593;
font-size: 10pt;
color:#42484d;
background-color:#224f5f;
}
to this:
background-color:#ffffff;
Remember this will affect everything with the class of input, textarea, select. I used the chrome inspect and firebug lite tool to verify this and it worked. If you only want to effect text areas bg color do this:
input,select {
padding: 1px;
border: solid 1px #5c8593;
font-size: 10pt;
color:#42484d;
background-color:#224f5f;
}
textarea {
padding: 1px;
border: solid 1px #5c8593;
font-size: 10pt;
color:#42484d;
background-color:#ffffff;
}
The code in the question does it, provided that you insert it e.g. in a style element after the tag <link rel="stylesheet" href="style.css" type="text/css" />. The external style sheet sets the background color etc. in a simple manner, which can easily be overridden, provided that you place your code after that link tag.
If this does not appear to work, check, in a browser, the HTML source code of the page. It is possible that the server software does some modifications to your code or that your browser has got an old version of the page (Ctrl+F5 should help then).
your <textarea> have attribute <... class="textarea"... You could add this to your stylesheet
.textarea {
background-color: #FFFFFF;
}
The specific rules changing the color of the textarea on the page you gave (the second link) is in style.css line 44:
input, textarea, select {
background-color: #224F5F; // This is the blue background
border: 1px solid #5C8593;
color: #42484D;
font-size: 10pt;
padding: 1px;
}
If it is just textareas that you want to style but dont want to touch the formatting you can do one of two things:
Option 1
Keep CSS as it is and add this underneath:
textarea {
background-color:#FFFFFF !important;
}
I dont like doing this as it makes the CSS to rigid and lots of !important declarations makes managing the style very difficult.
Option 2
Change line 44 styling to:
input, textarea, select {
border: 1px solid #5C8593;
color: #42484D;
font-size: 10pt;
padding: 1px;
}
textarea {
background-color: #FFFFFF;
}
input, select {
background-color: #224F5F;
}
I'd recommend simply targeting the textareas and changing their background colour and giving them a border.
textarea {
background-color:#FFF;
border:1px solid #224f5f;
color:#000;
}
I've been trying to style a jQuery UI dialog for hours, and am going around in circles. I am able to get my desired look by manually adding buttons to the dialog. See the following link for a working example. This Works
Now, I want to do it the right way and add buttons per the jQuery UI manual. There are about a billion classes which are automatically added to the buttons, so I remove these factory classes, and then add a couple of custom classes.
$(this).dialog("widget").find('button').removeClass('ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only').parent().removeAttr('class').parent().removeAttr('class');
...
buttons : [
{text:'YES, DELETE IT',class:'newButton red',click: function() {alert("Delete Record");$(this).dialog("close");}},
{text:'CANCEL',class:'newButton gray',click: function() {$(this).dialog("close");}}
]
See the following link for my fail attempt This doesn't quite work
First of all, the buttons don't show the color image. Then I click anywhere on the dialog, and the image appears on the button. If the dialog is closed then opened, the dialog becomes taller. On top of that, the buttons are squished together, but I probably can figure that out.
Please help me find my error of my ways!
Here's what's happening:
On page load, your red button has a class of ui-state-focus. When you click anywhere on the page, that button loses that class, therefore displaying the red background image. Another thing I have noticed is that the button is inheriting the following:
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
font-family: Verdana,Arial,sans-serif;
font-size: 1em;
}
That could explain why the text is much larger. I also noticed that your buttons are NOT inheriting this CSS from your first test:
#dialog-deleteListRecord button {
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
cursor: pointer;
padding: 3px 8px;
color: white;
font-size: 12px;
font-weight: bolder;
font-family: Arial, Helvetica, sans-serif;
}
I hope that this gives you direction to solve your issue.
I'm trying to make a pseudo link class with the CSS3 text-shadow for both navigation and normal use of links.
The problem is that the state "a:hover" is overruling "a:visited" so when doing a mouseover on the link that previously has been visited, it outputs different that it should.
If the a:visited state isn't present in the CSS the color of the visited links will turn into the standard purple color, which I don't like it to.
Have a look at the site: www.sayhi.dk
The code looks like this:
HTML
<a class="lnk" href="http://www.twitter.com/sayhidk">#Sayhi.dk</a>
CSS
a.lnk:link {
font-size: 12px;
font-weight: bold;
font-family: Myriad Pro;
text-shadow:1px 1px #ffffff;
color:#7c7565;
text-decoration:none;
}
a.lnk:hover {
font-size: 12px;
font-weight: bold;
font-family: Myriad Pro;
text-shadow: 1px 1px #7c7565;
color:#ffffff;
}
a.lnk:visited {
font-size: 12px;
font-weight: bold;
font-family: Myriad Pro;
text-shadow:#ffffff 1px 1px 1px;
color:#7c7565;
text-decoration:none;
}
a.lnk:active {
font-size: 12px;
font-weight: bold;
font-family: Myriad Pro;
text-shadow:1px 1px #ffffff;
color:#7c7565;
text-decoration:none;
}
Hope that you guys can help me out.
In your example, specifying 'color' in the :visited style is sufficient.
Edit: the solution was to put a.lnk:visited before a.lnk:hover.
This may or may not help, but I never define a:link styles. I instead define an "a" style (no pseudo class), and styles get inherited nicely. Then I define :hover, :active, etc... And if I do not define one for a particular style, the catch-all "a" style gets applied.
It is also good practice to define a :hover as well as a :focus. They can be the same style if you like. The :focus is used in a limited way by the iOS and handicapped users who don't use a mouse but use a keyboard to navigate.