I have a little CSS code as below:
input{
background-image:url(css_img/input_bg.gif);
padding:6px;
margin:1px;
width:250px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
font-variant:normal;
height:30px;
-moz-border-radius:3px 3px 3px 3px;
-moz-box-shadow:0 2px 3px #DDDDDD;
border:1px solid #aaa;
color:#333333;
}
But this code changes the style of all the <input type="..."/> tags. How can I change the style of just text fields <input type="text" name="name" />? I don't want to have to add classes to them.
Also is there any way to round the corner just using plain CSS (not using image) which diplays well in Internet Explorer.
Please help me...
Use an attribute selector:
input[type="text"] {
/* styles here */
}
Use an attribute selector:
input[type="text"] { styles here }
As Eric and Rikudo stated :
input[type="text"]
For the corners in ie use CSS3 PIE
You can also use :
input[type=text]
input[type^=te]
input[type$=ex]
input[type*=t]
Element input with attribute type which contains a value that is equal to, begins with, ends with or contains a certain value.
More info here
Related
this code works Choreme and Firefox . But not working on İE 10 . Last td in table cannot take affect. It must turn normal.
.gridview tr
{
font-size: 20px;
border: solid 1px #c1c1c1;
padding-bottom: 3px;
padding-top: 3px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
background-color: #EEEEEE;
}
.noadres td {
text-decoration:line-through;
font-style:italic;
background-color:#f5eded;
}
.noadres td.etkabone {
text-decoration:solid;
font-style:normal;
}
html
<table class="gridview">
<tr class="noadres">
<td>HELLO</td>
<td>MY</td>
<td class="etkabone" >NAME</td>
</tr>
</table>
https://jsfiddle.net/dwc7kjmo/
In CSS2 the text-decoration property was a regular property with the syntax:
none | [ underline || overline || line-through || blink ] | inherit
In the CSS Text Decoration Module Level 3 : the text-decoration property is now a shorthand property with syntax:
<'text-decoration-line'> || <'text-decoration-style'> ||
<'text-decoration-color'>
where the values for <'text-decoration-style'> are:
solid | double | dotted | dashed | wavy
So now you can see why text-decoration:solid; works in Chrome and Firefox, because according to the newer spec - it is perfectly legal code.
Here is the browser support for the new text-decoration properties.
Notice that IE doesn't support the new syntax.
So, like others have mentioned, you should use text-decoration:none for greater browser support.
Change CSS to:
.noadres td.etkabone {
text-decoration:none;
font-style:normal;
}
solid is not valid for IE.
p.s. If you select inspect element you will see solid has a red underline.
The problem is here:
.noadres td.etkabone {
text-decoration:solid; /*This is invalid value for this property for IE*/
font-style:normal;
}
solid is the by default value of this property but IE does not support it.
You might want the normal font having no strike-through. Please change the above to the following:
.noadres td.etkabone {
text-decoration:none;
font-style:normal;
}
One can apply CSS styling to a placeholder, such as for Firefox:
::-moz-placeholder { text-decoration: underline; }
However, what I would like to do is underline a single letter in a placeholder, for the purpose of hinting at a hotkey for the user to press (similar to Windows in file menus), such as making the F in First Name underlined below:
<input type='text' placeholder='First Name' />
Is there any way to do this?
I think you can achieve this with CSS only in google chrome. For example:
You can select the first letter of placeholder
::-webkit-input-placeholder::first-letter {
color: red;
text-decoration:underline;
}
Result:
The text-decoration does not render when set with :first-letter in Chrome (Version 39.0.2171.71). So we can achieve the underline with border-bottom.
::-webkit-input-placeholder::first-letter {
color: red;
border-bottom: 1px solid red;
}
Result:
UPDATE: text-decoration works fine on Chrome 41.0.2235.0 Canary.
Here is the DEMO: http://codepen.io/MizR/pen/myeJZe
Unfortunately, this solution doesn't work on Firefox. :(
Update 2: No longer works. :(
You can use an absolute-positioned u tag, being careful to use the same font and padding as the input.
You'll need to hide the u when the input has content:
document.getElementById('iFirstName').onkeyup= function() {
var u= document.getElementById('uFirstName');
u.style.display= this.value>'' ? 'none':'inline';
};
u {
position: absolute;
font: 10pt verdana;
padding: 4px;
}
input {
padding: 3px;
font: 10pt verdana;
border: 1px solid #ddd;
}
<u id="uFirstName">F</u>
<input id="iFirstName" type='text' placeholder='First Name' />
If you are comfortable using contenteditable instead of input, you can try:
http://jsfiddle.net/lotusgodkk/GCu2D/473/
HTML:
<div contenteditable="true" data-ph="First Name">Hello</div>
CSS:
div {/*For styling div similar to input*/
width:300px;
height:24px;
border:1px solid grey;
}
div[contentEditable=true]:empty:not(:focus):before {
content:attr(data-ph);
color:grey;
}
div::first-letter {
text-decoration:underline;
}
I've seen tons of ie css questions, but none that seem to address what I'm asking here. Forgive me if I've missed one and asked a dupe:)
I have a website (asp.net mvc2, c#) littered with links similar to this:
<a href="<%= Url.Action("Action", "Controller")%>">
<div class="buttons">
<button type="button"> Click Me</button>
</div>
</a>
These work fine in Chrome, FF and Safari, but not in IE9. The button itself seems to cancel out the link. In other words, the link is only active on the very outer edge of the button (if at all).
I'm not very fluent with Css, but here's the relevant bit (I think, though I suppose the problem could lie elsewhere...):
.buttons a, .buttons button{
display:inline-block;
text-align: left;
float:left;
margin:0 7px 0 0;
background-color:#f5f5f5;
border:1px solid #0b0101;
border-top:1px solid #eee;
border-left:1px solid #eee;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
line-height:130%;
text-decoration:none;
font-weight:bold;
color:#565656;
cursor:pointer;
padding:5px 10px 6px 7px; /* Links */
}
.buttons button{
width:auto;
overflow:visible;
padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
padding:5px 10px 5px 7px; /* Firefox */
line-height:17px; /* Safari */
}
Does anyone know a workaround or hack for this? Thanks!
I'm not sure what you're trying to achieve with a <button> tag inside an <a> tag, but it isn't valid HTML, so it's no surprise it's not working properly -- perhaps more of a surprise that it is working in some browsers.
In any case, there's no need for this kind of thing, as an <a> tag can be styled to look and work like a button without needing any additional elements inside it.
For example, see http://www.cssbuttongenerator.com/ which produces CSS for a plain <a> tag with nothing inside it except the button text.
There are dozens of other sites with similar tutorials and techniques, but the basic advice I'd give you hear is to drop the <div> and the <button> and just go with a plain <a> tag.
Hope that helps.
Thanks for the feedback. I didn't realize wrapping a button in an <a> tag was invalid, but sure enough, it is. Anyway the simplest fix for this, imo, was dropping the <a> tag, and adding
onclick="window.location.href='<%=Url.Action("Action", "Controller")%>'"
to the <button> element, essentially turning the button into a link.
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 can't get this placeholder to style correctly in Firefox 13.0.1
I have an input field with a placeholder:
<input class="textFieldLarge" placeholder="Username" id="username" name="username" type="text" />
I have this CSS:
.textFieldLarge{
width:400px;
height:50px;
line-height:50px;
padding-left:5px;
padding-right:5px;
background:none;
background-color:#FFF;
border:solid 1px #BBB;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color:#333;
}
.textFieldLarge::-webkit-input-placeholder, .textFieldLarge:-moz-placeholder{
font-style:italic;
color:#BBB;
}
This should style the text field #333 and the placeholder #BBB italic. I have this working with chrome and IE but can't figure FF out.
EDIT, FOUND THE PROBLEM THAT I APPLIED ::-webkit-input-placeholder AT THE SAME TIME
Still would appreciate a fix, but I doubt possible as it works fine when both are applied separately. Not a real issue any more but a little annoying.
If one part of a selector is invalid, then the whole selector will be invalidated.
Therefore, one needs to have two different rules for each of -moz- and -webkit-.
It's been a while since posting this question, but in addtition to Gerve's answer, one should use ::-moz-placeholder for Firefox 19+: http://mzl.la/15FPlx6 and can add support for IE10 with :-ms-input-placeholder. So the final code will look like that:
.textFieldLarge::-webkit-input-placeholder {
font-style:italic;
color:#BBB;
}
.textFieldLarge:-moz-placeholder {
font-style:italic;
color:#BBB;
}
.textFieldLarge::-moz-placeholder { /* Firefox 19+ */
font-style:italic;
color:#BBB;
}
.textFieldLarge:-ms-input-placeholder { /* IE10 */
font-style:italic;
color:#BBB;
}