I added these css. But I can't get the placeholders/watermarks to have ellipsis. They do have the red font though.
input::-webkit-input-placeholder {
color: red !important;
max-width: 95% !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
overflow: hidden !important;
}
input:-moz-placeholder {
color: red !important;
max-width: 95% !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
overflow: hidden !important;
}
Since I am working for mobile, I want it to work in Safari.
Using the :placeholder-shown selector works well and will ensure any text input doesn't get hidden. Compatibility is pretty solid too.
input:placeholder-shown {
text-overflow: ellipsis;
}
<input placeholder="A Long Placeholder to demonstrate"></input>
YES
Method 1
Still supported on all browsers.
Overflow ellipsis of a placeholder can be achieved using the attribute selector:
[placeholder]{
text-overflow:ellipsis;
}
This will also have added the side effect of adding ellipsis to the inputs value in some browsers. This may or may not be desired.
[placeholder]{
text-overflow:ellipsis;
}
input{width:150px;}
<input placeholder="A long placeholder to demonstrate"></input>
<input value="A long value to demonstrate"></input>
Method 2
No longer supported.
As of Chrome and Edge V100+ the ::placeholder pseudo element selector does not support the text-overflow property.
::placeholder{
text-overflow:ellipsis;
}
::placeholder{
text-overflow:ellipsis;
}
input{width:150px;}
<input placeholder="A long placeholder to demonstrate"></input>
WHY?
It seems like a tightening of the conformation to the specification:
Only the subset of CSS properties that apply to the ::first-line pseudo-element can be used in a rule using ::placeholder in its selector.
All font-related properties: font, font-kerning, font-style, font-variant, font-variant-numeric, font-variant-position, font-variant-east-asian, font-variant-caps, font-variant-alternates, font-variant-ligatures, font-synthesis, font-feature-settings, font-language-override, font-weight, font-size, font-size-adjust, font-stretch, and font-family.
All background-related properties: background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachment, and background-blend-mode.
The color property
word-spacing, letter-spacing, text-decoration, text-transform, and line-height.
text-shadow, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, and vertical-align.
OLDER BROWSERS
Need support for older browsers?
IE not playing nicely?
I created a little css hack to simulate a placeholder. Use this code to simulate your inputs placeholder. It's a little dirty but can offer support as far back as IE6.
.ellipsis{
box-sizing:border-box;
position:relative;
padding:0 5px;
background:#fff;
color:rgba(0,0,0,0.5);
width:100%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.ellipsis input{
box-sizing:border-box;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
display:block;
background:none;
border:1px solid #ddd;
color:#000;
padding:0 5px;
}
.ellipsis input:focus{
background:#fff;
}
<div class="ellipsis">
A Long Placeholder to demonstrate A Long Placeholder to demonstrate A Long Placeholder to demonstrate
<input></input>
</div>
Support outside of this range would require javascript.
To cover as many browsers as possible, try these:
[placeholder]{
text-overflow:ellipsis;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
text-overflow:ellipsis;
}
::-moz-placeholder { /* Firefox 19+ */
text-overflow:ellipsis;
}
:-ms-input-placeholder { /* IE 10+ */
text-overflow:ellipsis;
}
:-moz-placeholder { /* Firefox 18- */
text-overflow:ellipsis;
}
According to the specification, text-overflow applies only to block containers like div and p tags. And since inputs are not containers, you cannot apply this CSS rule.
Just input { text-overflow: ellipsis; } without any placeholder pseudos did the trick.
Related
I am implementing a close button on an element containing text with CSS. The close button is generated content from a pseudo element with content:'X';. I need the cursor to become a pointer on that "X" so I used :
cursor:pointer;
It works fine in Chrome and Firefox but it doesn't seem to work in Internet Explorer (testing on IE11 windows 7).
DEMO (test in IE)
I also tried with cursor:hand; but it doesn't solve the issue. How can I make the cursor a pointer while hovering the "X" but not on the text of the div?
Relevant code :
div{
font-size:2em;
position:relative;
display:inline-block;
}
div::before{
content:'X';
cursor:pointer;
display:block;
text-align:right;
}
<div>some text</div>
--EDIT--
I am aware that making a child or sibling in the markup and applying cursor:pointer; to it will work but I would like to minimize markup and use a pseudo element for the close button as it has no semantic value.
I'm really late to the game, but I just now figured out a solution to this problem.
This solution allows a pointer on the child element, while retaining a default cursor on the parent element.
(See the accepted answer here for a solution that doesn't include keeping the parent element's cursor default: cursor: pointer doesn't work on :after element?)
First of all, for this hacky solution, you have to give up the ability to interact with the parent element using the mouse.
Set the parent element to cursor: pointer.
Then, setting the parent element to pointer-events: none will allow you to "click/hover through" the parent element.
Then, for the pseudo element, just re-enable pointer events with pointer-events: auto.
Voila!
div{
font-size:2em;
position:relative;
display:inline-block;
/* remove ability to interact with parent element */
pointer-events: none;
/* apply pointer cursor to parent element */
cursor:pointer;
/* make it more obvious which is child and which parent for example*/
background: darkred;
}
div::before{
content:'X';
display:block;
text-align:right;
/* restore ability to interact with child element */
pointer-events: auto;
/* make it more obvious which is child and which parent for example*/
width: 30px;
text-align: center;
background: white;
}
<div>some text</div>
I believe that it's not working in pseudo elements in IE,
What I'm use to do is add cursor: ponter to main element.
If you need to add cursor: pointer to pseudo element only, than only way is to add child element
like:
<div><span></span>some text</div>
div{
font-size:2em;
position:relative;
display:inline-block;
}
div > span{
cursor:pointer;
}
div > span::before{
content:'X';
display:block;
text-align:right;
}
But than is no point to using pseudo class...
demo
HTML:
<div>
<div id="closebutton">
X
</div>
some text
</div>
css:
div{
font-size:2em;
position:relative;
display:inline-block;
}
div#closebutton{
cursor:pointer;
display:block;
text-align:right;
}
DEMO
demo
div{
font-size:2em;
position:relative;
display:inline-block;
border:1px solid #000;
margin:20px;
padding:20px;
}
div:after{
cursor:pointer;
display:block;
position:absolute;
height:20px;
width:20px;
top:-10px;
right:-10px;
content:'X';
font-size:15px;
}
<div>
some text
</div>
In order to make IE 7,8,9,10 behave like regular browsers that can deal with pseudo selectors, I always use IE7.js, a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues related to Internet Explorer. An alternative would be modernizr.js which is a good implementation to get pseudo selectors working with IE. I hope, that helps.
I have a div in my layout which has box-sizing property assigned to it with value border-box. It works good in other browsers but does not work in IE7. I have read that for fixed width elements, it works. The IE developer tool tells that box-sizing property is assigned correctly. The CSS code:
.item {
width:360px;
background:#FFFFFF;
border:0;
border-bottom:1px solid #DDDDDD;
padding:12px 24px;
margin-bottom:24px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
It breaks the layout.
Unfortunately IE7 doesn't support box-model: border-box and uses the W3C content box model instead. There are a couple of options here - use a polyfil or write specific IE7 rules in a conditional comment.
I've seen this and this, and tried both methods to apply word breaking to a span tag. Neither one works in IE8 for me.
Here's the code I'm trying:
.bodyWrap .dashboard .col2 .wrapper .locInfoWrap .nickname {
font-size:16px;
color:#000;
word-wrap:break-word;
-ms-word-wrap: break-word;
-ms-word-break: break-all;
}
EDITED TO ADD - I just tried adding a width to the span element, like this:
.bodyWrap .dashboard .col2 .wrapper .locInfoWrap .nickname {
font-size:16px;
color:#000;
word-wrap:break-word;
-ms-word-wrap: break-word;
-ms-word-break: break-all;
width:100%;
}
Still looks the same. Help, please! This is a major requirement for our client.
Here's what it ends up looking like (larger version here):
What do I need to do to get this to work in IE8?
What ended up working for me was setting the span to have a display of inline-block.
Why I can't add a margin to the first line of my p like this ?
p:first-line{
color:red; /* ok */
margin-bottom:20px; /* nothing */
}
http://jsfiddle.net/xtb5M/
According to the W3C, the margin property doesn't apply to the first-line selector:
The ::first-line pseudo-element is similar to an inline-level element, but with certain restrictions. The following CSS properties apply to a ::first-line pseudo-element:
font properties
color property
background properties
‘word-spacing’
‘letter-spacing’
‘text-decoration’
‘vertical-align’
‘text-transform’
‘line-height’
You could fake it with line-height
p{
margin-top:-10px;
}
p:first-line{
color:red;
line-height: 40px;
}
http://jsfiddle.net/willemvb/Y9M28/
I have next code:
<div class="form_field">
<input type="text" />
</div>
styles
.form_field { height:22px; border:1px solid #B7AB8C; background:#FFFFEA; padding:0 5px; line-height:22px; }
.form_field input[type="text"] { width:100%; border:none; border:0; border-color: transparent; margin:0; padding:0; height:22px; line-height:22px; }
In IE7 I can't remove the border around the input field.
What are the ideas?
The best decision for myself, I identified as set a class for field "input" as recommended "tylerdurden".
And I add next properties for this field as "background:transparent; vertical-align:top;".
But I could not override the property line-height for field "input".
What are the ideas? (:
Added: I removed the property "height" for container .form_field - helped to align text vertically.
For IE7 you'll have to add a classname to the input element, or select it in a different way as IE<8 doesn't support attribute selectors.
But this css should work with the right selector:
.form_field input
{
border:0
}
But please note that using border-color: transparent; with border: none; will impact the input’s box model by removing the border dimensions.
This will alter the input’s relationship, like vertical positioning, with surrounding elements.
This is because the code below for input[type="text"] is not known in IE7 or below.
.form_field input[type="text"] { width:100%; border:none; border:0; border-color: transparent; margin:0; padding:0; height:22px; line-height:22px; }
Note: IE7 and IE8 support attribute selectors only if a !DOCTYPE is specified. Attribute selection is NOT supported in IE6 and lower.
You may want to add this to the top of your html.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
You don't need quotes around "text" in the CSS selector. Instead of all those border proerties, just do border: 0; on its own (or if you want to be thorough border: 0px none transparent but that's overkill)
Give a class to text field ;
.form_field .textInput
{
border:none;
}
Then in your html;
<div class="form_field">
<input type="text" class="textInput" />
</div>
Try this
<!--[if IE]>
<style type="text/css">
.form_field input{
filter:chroma(color=#000000);
border:none;
}
</style>
<![endif]-->
It seems IE7 doesn't want the "none" value, "0" seems to work.