I'd like to have a placeholder of sorts for my DIV tag, which appears when the DIV is not in focus and has no text. I know there are multiple SO links on this, but the common solution provided by everybody, doesn't seem to work for me. Following is the HTML and the CSS. Why is this not working?
Code:
#composeBody:empty:not(:focus):before{
content:attr(data-placeholder);
color: #555;
display: block; /* For Firefox */
}
<div id="composeBody" data-placeholder="Start composing your message..." contenteditable="true"></div>
there are lot of options using javascript, but if you want to do it in css.Try this:[contentEditable=true]:empty:not(:focus):before{
content:attr(data-text)
}
html: div( contentEditable=true data-text="Enter text here")(/div)
Related
I'm having some difficulties styling mdl-textfield.
Specifically, styling size and color the floating label, and height and color of the animation after pressing the input field.
Effectively, this is my starting point, as taken from the component list.
https://jsfiddle.net/2aznyc4n/1/
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3" placeholder="Text here.">
<label class="mdl-textfield__label" for="sample3">Text...</label>
</div>
</form>
I am able to set the size and color of the floating label by adding into the label in the html
style="font-size:x-large; color:purple"
So is it some kind of bug that this has no effect when the label goes floating, if this is set in the css? If I set the style in the html and the css, then both of them suddenly has an effect. I just cant wrap my head around this.
If all possible, I want to avoid having styling in my html.
I have been digging through the source code, with no success in figuring out the styling of the mdl-js-textfield color and height.
Customization of MDL is a little bit tedious. At the beginning you can choose your primary and accent color and have a set of useful and beautiful componets, but when you need customize something a little bit, difficulties come out.
I digged for MDL source code in order to find what classes added color and font-size styling. I solved the need to adjust color and font-size of input text floating adding this hacking code in my css.
.mdl-textfield{ input[type="text"]{ font-size: 24px; color: #color500;} }
.mdl-textfield--floating-label.is-focused .mdl-textfield__label, .mdl-textfield--floating-label.is-dirty .mdl-textfield__label, .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label{
font-size: 14px;
top: -5px; //Manages floating label fly
}
.mdl-textfield__label{ font-size: 24px; top: 20px; color: #color500;}
Normally the customization should be done with the custom CSS theme builde.
But if you prefer to use your own css you should use !important.
.mdl-textfield__input {
color: black !important;
}
For the pleaceholder text you need to use vendor prefix CSS:
::-moz-placeholder { /* Firefox 19+ */
color: red !important;
}
::-webkit-input-placeholder {
color: red;
}
I really struggled lots specifically with the bottom-border-color after the animation but thankfully after some research I could deduct a solution mentioned over here (it's prohibited to duplicate answers, so I rather put a direct link to it):
https://stackoverflow.com/a/43512625/1920145
Hope it helps many more people.
I don't know why, but for some or odd reason the specific style for a p tag inside does not style when using a custom style sheet css, but works perfectly fine when doing inline.
Obviously I'm trying to avoid using inline, because it's not the best practice.Using Bootstrap
<h1 class="page-header">Properties</h1>
<div class="col-lg-4 main_content">
<img class="img-responsive" src="images/home_image2.jpg" />
<p>CHATHAM<br />
London, Uk
</p>
</div>
The html.
The CSS:
.main_content p {
font-size:24px;
background:#262626;}
Both the font size as well as the background color doesn't seem to work
I have tried targeting it as a ID, but to no avail.
use this
.main_content p {
font-size:24px !important;
background:#262626 !important;}
Try using
.main_content p {
font-size:24px !important;
background:#262626 !important;
}
Working fiddle
http://jsfiddle.net/52VtD/9080/
But it works without !important, i dont think !important is not godd to use, please check you other css maybe you are overriding some more classes, if you can please make a working fiddle or send us a link
Or write with upper class.
.page-header .col-lg-4.main_content p {
font-size:24px;
background:#262626;
}
Okay.
The solution I came up with was to change the name of the class affecting the div.
Even though did a search to check if I might have been using it somewhere else, and nothing came up, this solution worked out perfectly fine.
This is the name change I used.
.main_content_home p {
font-size:20px;
background:#262626;
color:#FFF;
padding: 12px;
}
I've been trying to remove the line break that is caused by a break tag
I have come up with a solution that works in chrome, but not in firefox / IE11. Kind of curious if there is a CSS only solution that I could use in this situation that would work across most modern browsers:
HTML
<p>This line breaks in firefox,<br> but not chrome</p>
CSS
br {
display: inline-block;
content: " ";
width: 7px;
}
JSFiddle
Edit:
The break tag also needs to act like a space between the two words.
Using the following markup works cross browsers:
HTML
<div class="test">WORD<br> WITH<br> SPACE</div>
<div class="">WORD <br>WITH <br>SPACE</div>
CSS:
.test br{
display: none;
}
Use case is if you want to have a tag at a certain media query while still retaining spaces between the letters.
JSFIDDLE
I tried a few CSS methods and none of them are working in Firefox. I would suggest using a little bit of JavaScript to help you out.
Using jQuery, or just plain JS, insert a spacer element after each <br>
$('br').after('<span class="spacer"></span>');
The CSS:
br { display: none; }
.spacer { content: "\00a0"; }
I want to use a standard set of buttons on a website regardless of what is written in them (i.e. submit, pay, go, spell correct) but for some reason I can not get the sprite image to show up. My codes is as follows:
HTML:
<div id="iconic">
Place Sprite button here <span><a class="button" href="#">Test</a></span>
</div>
CSS:
span.iconic a:link
span.iconic a:visited
{
display: block;
background-image:url('images/an_nav_btn.jpg');
width: 150px;
height: 45px;
}
span.iconic a:hover
{
background-position: 0 -50px;
}
span.iconica a:active
{
background-position: 0 -100px;
}
Any suggestions on how to get this to display with the text on top (in this case it will have the button with the word "test" on it.
Thanks in advance.
According to your posted css you are attempting to manipulate a link inside a span with the class of "iconic"... and that doesn't work with what you have in the html:
to get you on the right track, try
replacing all the span.iconic's
with #iconic span's
#iconic span a translates to "all <a>'s inside a <span> inside any element with the id of 'iconic' "
In CSS:
. is used for to prefix class names
# is used to prefix IDs.
Your element is a DIV, and you're specifying a SPAN in your CSS. You've got both of these mixed up.
The CSS declaration for <div id="iconic">
would be:
#iconic {
...
}
You may want to consider looking at Font Awesome, that handles a lot of this for you.
My first post here and unfortunately it won't be that exciting and I need an answer that includes IE6.
To get space between paragraphs, I'm styling my <p> tags like this:
div.content_cms p {
margin-top: 0px;
margin-bottom: 15px;
padding: 0px 15px 0px 0px;
}
The margin bottom to space the paragraphs. This of course works fine. But then I also need to style a link with html is this:
<p>Text </p>
When there is a link as in the example above, I don't want the margin-bottom to be applied. I tried to fix it with this:
div.content_cms p a {
margin-bottom: 0px !important;
}
Which of course doesn't work.
I'm adding a class to the <a> tags with jQuery so I can automatically add an icon to links. I tried adding
margin-bottom: 0px !important;
to the class I'm adding with jQuery but that didn't work either.
What's the best way to style spacing between <p>paragraphs</p> with text but not paragraphs with links?
Thank you.
You can easily do this with jQuery:
$('p').has('a').css('margin-bottom', 0);
Live demo: http://jsfiddle.net/NyjvT/
If you need to set multiple styles, then consider this:
$('p').has('a').addClass('whatever');
CSS:
p.whatever { margin-botttom:0; font-size:20px; ... }
I don't think you can.
Your best bet is to add a class to those particular <p> elements, and override the margin on those:
div.content_cms p.nomargin {
margin-bottom: 0px;
}
<p class="nomargin">Text</p>
If this is not possible on the server side, you could do some jQuery hackery to take care of it.
Maybe there's some CSS3 magic that could be used, but I'm not sure of that; and since you want IE6 support, it's out of the question anyway.
This is not possible using only CSS.
CSS (Cascading Style Sheets) works only down the document tree.
The reason for this is performance.
For more info read this:
http://snook.ca/archives/html_and_css/css-parent-selectors
http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors#comment_3940
You need to use javascript for that to work.