I'd like to style one span element generated by Rich faces:
<td class="rf-tb-itm" id="j_idt7:logoutLink_itm">
<span class="topmenulink" id="j_idt7:logoutLink">Logout</span>
</td>
I can't match for the whole id because the part before the semicolon can differ. For testing I wrote
span[id="j_idt7:logoutLink"] {
padding:2pt 10pt !important;
border:1px solid transparent;
color:grey;
}
and it matches.
This matches too:
td > span {
padding:2pt 10pt !important;
border:1px solid transparent;
color:grey;
}
But why does not match this (in latest Firefox and Opera)
span[id*="logoutLink"] {
padding:2pt 10pt !important;
border:1px solid transparent;
color:grey;
}
or this?
span[id$="logoutLink"] {
padding:2pt 10pt !important;
border:1px solid transparent;
color:grey;
}
Any ideas?
I know what's going on. It's an RichFaces problem. The CSS EL Parser doesn't recognize CSS3. See the JBoss output:
08:54:18,235 WARNING [org.richfaces.log.Resource] (http--0.0.0.0-8080-6) Problem parsing 'css/default.ecss' resource: Error in attribute selector. Invalid token "*". Was expecting one of: <S>, "=", "]", "~=", "|=".
08:54:18,236 WARNING [org.richfaces.log.Resource] (http--0.0.0.0-8080-6) Problem parsing 'css/default.ecss' resource: Ignoring the whole rule.
It works when I use a "real" CSS file and not this EL CSS.
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;
}
If the css is as below:
input[type="text"]
{
border: 1px solid green;
}
.text
{
border: 1px solid red ;
}
And if the html is as below:
<div>
<input type="text" class="text"/>
</div>
The border-color of the textbox is green.
It seems that the "element" has the higher priority.
How to make the .class valid? Is it a must to use the !important?
Any other choices?
I tested below CSS code:
input[type="text"]
{
border: 1px solid green;
}
input[type="text"] .text
{
border: 1px solid red;
}
HTML code:
<div>
<input type="text" class="text"/>
</div>
Guess what?
Still Green.
Remove the space in 'input[type="text"] .text'
it becomes input[type="text"].text .
That's ok. The border color is red.
The C in CSS stands for cascading. You just need to give it higher precedence then the other rule.
input.text
{
border: 1px solid red ;
}
/* Set default border for `text` elements */
.text
{
border: 1px solid red;
}
/* Override for input elements */
input.text
{
border: 1px solid green;
}
Styles are applied in sequence, but also must follow specificity rules. The .text is less specific than input[type="text"], so the green border "wins." If you make the red border rule more specific, you can get the results you seem to be expecting.
Try something like input.text and see what happens. If that doesn't do it, you'll have to get even more specific.
It's a matter of weight of your selectors.
With
`input[type="text"]
You are passing both input and [type=text] as selector, so you're passing a total of two.
With
.text
You are passing only one. This translates in less weight and less specificity, so the first selector wins over the second.
By adding input before (i.e. input.text) you're adding more weight to second style, which will prevail as you'd expect from Cascading Style Sheets.
Specificity is easily visualized through websites like Specificity Calculator.
I'm using the following CSS to border a <tr> entirely.
<style type="text/css">
tr.top td { border-top: thin solid black; }
tr.bottom td { border-bottom: thin solid black; }
tr.row td:first-child { border-left: thin solid black; }
tr.row td:last-child { border-right: thin solid black; }
</style>
It works perfectly in Mozilla Firefox but in Internet Explorer, it doesn't border the last right <td> as shown in the following snap shots.
In Firefox, it displays the following table.
In Internet Explorer(8) however, it displays the table as follows.
Means that in the above CSS, this CSS class tr.row td:last-child { border-right: thin solid black; } doesn't work in IE. What is the solution to this? I'm using IE 8.
IE 8 doesn't support the :last-child pseudo class (CSS 3), but it does support :first-child (CSS 2.1)
CSS Compatibility and Internet Explorer
You'll need a different selector for the last cell such as a custom class name.
btw, what if you declare the border out of the css file, but instead after style, within the TD tag? I was told that IE8 has some bugs with border rendering. Post it here, and see if it works.
another doubt, why don't you use 1px instead of thin!?
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