Is there anyway to change a text input's value (the default text that displays) with CSS?
I'm optimizing a site for mobile and I want the text 'search this site' to be shortened to 'search'.
That really isn't what CSS is for.
CSS is for styling your content; HTML is for the actual content itself.
If you need to modify the content after the HTML has loaded, then that's what Javascript is for.
So the real answer to your question is: either modify the HTML directly, or use Javascript.
There are some things you can do with CSS that affect the content, such as adding additional text in-front of or behind an element using the :before and :after pseudo-selectors, but that won't help you in this case, and shouldn't be used for the kind of content change work that you're talking about.
By the way, slightly off-topic, but if you're using input field value as a prompt text, you may want to consider looking into the HTML5 placeholder attribute instead. This also doesn't address your question, but it does sound like it might be something that could be useful to you.
No, CSS cannot change the value attribute of an input, or indeed any attribute of any element.
Late to the party but using "content" attribute, within element:before will accomplish what you need as seen in http://www.w3schools.com/cssref/tryit.asp?filename=trycss_content_string
I was able to manipulate a button content value via jQuery toggleClass, switching between the following classes:
.open_button:before{
content:"open";
}
.close_button:before{
content: "close";
}
I understand the qualms, but I do feel like toggleClass provides an elegance that justifies the CSS trick. Otherwise one would be using a toggle function with nested css switch functions. I personally think avoiding the nested jQuery functions is better looking.
If you want to change the value use the HTML "value" attribute;
example:
<input type="submit" value="ENVIAR">
that will change the default "submit" value to "enviar"
For me the solution was
<button type="submit" class="mybutton" name="add">
<span class="add">Add new</span>
</button>
therefore the css will be :
.mybutton:hover .add:after{content="0"}
This solution is little bit tricky,
but it's always work for me.
/*CSS Code*/
#media screen and (max-width: 768px) {
.showondesktop {
display: none !important; }
}
#showonmobile {
display:none;
}
#media screen and (max-width: 767px) {
#showonmobile {
display:block; }
}
<!--HTML Code->
<div class="showondesktop"> search this site </div>
<div id="showonmobile"> search </div>
When the website is visited from Mobile it will be displayed "search", but when visited from Desktop it will be displayed "search this site".
Image Preview:
Output-Desktop-view.jpg
Output-Mobile-view.jpg
so easy, just type in for example:
button {
color: red;
font-family: sans-serif;
}
there you are,
the buttons take all the inputs with values with for example submit/reset/.etc..
Related
TL;DR: Wondering if there's a CSS property that can break content where HTML doesn't naturally:
Baby
Buggy Bumpers
instead of
Baby Buggy
Bumpers
The only way I can think of to do it is to add where you don't want the line to break, but I'm working in WordPress, which strips those.
This is to graphically style a site's name on the home page. The site name is part of the nav, so it's inside an <li>, using grid layout.
Luckily in my case, setting the width with a dimension that is relative to the font size seems to break the way I want at all viewport widths:
.my-brand a {
width: 16ch;
text-align: end;
}
white-space: nowrap and such elements won't work with the "baby buggy bumpers" example because the need is to break after one specific word. Just wondering if there's some way to specify in a way similar to nth-child(2).
Made a Codepen to play with.
If you can't use Javascript and can't add tags in the string like :
<div class='string'>
Baby<span>Buggy Bumpers</span>
</div>
It only remain "hacky" CSS solution. There is one using pseudo-elements :
HTML :
<div class='string'>
Baby
</div>
CSS :
.string{
width: 11ch;
text-align: end;
font-size: 2em;
}
.string::after {
content: "Buggy Bumpers";
color: red;
display:block ;
white-space:nowrap;
}
Live exemple : https://codepen.io/camillewemajin/pen/JjWzWzN
But that's not really clean for many reasons, like SEO...
I thought:
.eventfuture
{
display: none !important;
}
Which is a very simple CSS class, ought to completely hide the text?
I apply the above to a paragraph class:
<p class="eventfuture">Text Here ABC</p>
What happens is that "Text Here ABC" is 100% hidden on the client side of the browser (good) but still present in the source code (bad).
Is this normal behaviour? I am sure it is not.
I don't want "Text Here ABC" to be indexed by search engines hence why I would like it completely hidden.
Any ideas what it is that I might be doing wrong?
Thanks
What you are asking is impossible by css. Both display: none; and visibility: hidden; will be shown in the source code.
However, if you want that part of your source code not to be indexed by google you can use:
<!--googleoff: index-->
<div>Something here</div>
<!--googleon: index>
But still some articles say this works and some say it doesn't.
I have been looking for a 100% solution for a long time. Some say using jquery .show() and .hide() can help as well.
IMPORTANT NOTE: Hiding text is not a good practice if you need SEO. Google bots don't like hidden texts such as display: none; because they think you are hiding keyword content.
I don't think any css would achieve what you're describing.
display: none
Just visually hides the element that it's styling.
If you want to remove the contents from the document you should use javascript and modify the text/innerhtml from there. An example would be:
document.getElementByClass("eventfuture")[0].innerHTML = "";
What display: none; does is not to hide the element from the DOM. It simply hides it from the user and search engines can still index it. Probably you should hide it from the server.
EDIT
To remove the element from the DOM entirely, this might be a fix:
var elem = document.querySelector('#some-element');
elem.parentNode.removeChild(elem);
Real code snippet
Check w3schools tutorial on display none
I'm attempting to allow our CMS editors the ability to swap out the text used for a page title using only a css override.
<header data-alternate="An Alternate Title">
This Page's Default Title
</header>
Using the :before or :after tag, one could use one of many available alternate titles.
header:before {
content: attr(data-alternate);
display: inline-block;
}
If only we could also say,
header:text {
display: none;
}
Unfortunately, as far as I can tell, there is no good way to hide "This Page's Default Title" in order to replace it with "An Alternate Title". If this were a Sprite, we could use one of the well-worn image replacement techniques like Phark or otherwise. Not so much with text replacement generated by :before, because the :before is also affected by the CSS devices used to hide the default text so that, with Phark, for example, the :before content is also at -9999px.
There are solutions I'm trying to avoid.
Using the Phark method or somesuch to hide the default text and then using absolute positioning on the :before content to put it back at left: 0, top: 0. I want/need to preserve flow if possible.
Wrapping the "Page's Default Title" in a span and just setting it to display: none in the CSS when an alternate title is being used.
i.e.
<header data-alternate="An Alternate Title">
<span class="default">This Page's Default Title</span>
</header>
This works, but a span nested in a header is displeasing.
Is there a way to target a tag's text without also targeting its generated :before/:after content? Is there another way to do this?
I'm not sure if this is exactly what you want, but you could try something like this:
p {
visibility: hidden;
}
p:before {
content: attr(data-alternate);
display: inline-block;
visibility: visible;
}
http://jsfiddle.net/yJKEZ/
You can set the visibility of the p element to be hidden, and then set the visibility of the :before pseudo-element to be visible within it's parent (the p) despite it's setting.
If that doesn't quite work as expected, there isn't really anything tremendously wrong with adding an extra span in, to help the process. It might not be as clean, but it could work better.
I do, however, want to raise the question of why you might need to do this, and point out some concerns with an approach like this...
For starters, pseudo elements are not part of the DOM, so that alternate text can't be selected, and isn't as accessible to the browser (or the user). Screen readers or search engines will see the default text, and not pay any attention to the alternate text, but that's what your user will see... This could lead to some confusion.
While your question specifies that you want to be able to do this with CSS, and while it may be possible, it really isn't the best solution for doing something like this. Especially if your website is being viewed in an older browser which does not support pseudo elements (Now the user sees nothing at all!).
I would more recommend something like this for swapping an image out for alt text in a print stylesheet, or swapping a hyperlink's text for the full address that it links too (again, mainly for a print stylesheet). Changing important content like a heading in this fashion can cause a lot of other issues, especially in terms of accessibility.
Just something for you to consider along with my answer... I hope I've helped you with your problem!
I am using a special link effect on <a> tags with the background-image: CSS. The links look nice but the website also contains a lot of <img> that are links, which also get the CSS.
I am currently solving the issue with jQuery: $("img").parent().css("background", "none");
Is there any correct way of doing this with CSS, getting this CSS not to affect tags.
Code:
a:link ,a:visited {
text-decoration: none;
background-image: url(/underline.png);
background-repeat: repeat-x;
background-position: bottom;
}
CSS4 defines the following syntax:
!a>img {background-image:none}
However, as far as I'm aware no browser supports it yet. It's also not final on where the ! goes, as a!>img and !a!>img all have been suggested.
So, basically, there is no CSS solution for this. However, there is a "hack" solution.
Assuming body {background:white}, you can do this:
a>img {background:white}
This will cover up the link's background with a white one, which essentially hides it. Adjust the colour as needed. Note that this won't work if your content area has a background image...
When I saw this: background-image: url(/underline.png); I got very nervous. Is there some special effect you need to employ here? What's wrong with the underline property in CSS?
To solve this in CSS2 you'll need to redesign your code. Therefore, this might be a bit impractical.
Keep your css code for links.
Then wherever you have a link with an image in there, you should add a class. Use this class to link CSS that overrides the typical behavior.
There is no way to do what you want in current CSS capabilities. Jquery works but it is afterall a hack.
a {
code here that you want
}
a.img {
override properties
}
<!-- Html -->
Normal Text
<a class="img" href="#"><img src="image.png" width="x" height="y" alt="" /></a>
Some food for thought -> The reason CSS does not support what you seek is because a child should not define a parent's style! AFterall, we (as people) do not define our parents' traits but we surely override what we inherited.
What would be the difference in your links ?
Domain, peticular folders, extension name , etc...
I asked cause you could filter them by url.
[href~=picto] will mathch if url contains picto or something similar
[href^="image/] will match any url begining with image/whatever_is_behind_or_not
[href*="image/] will match any url containing image/
[href$=".jpg"] will match any url ending with this .jpg extension
As you can see , there's nowdays lots of option , level4 will make it much easier though :)
Well, unless I am missing something, the solution to this is rather simple.
On a website I worked on I used the following two CSS rules to differentiate between linked text effects and linked image effects:
a:link {
/* rules for linked text effects */
}
a img {
/* rules for linked img effects */
}
I'm woking on a project that heavily relies on the :target psuedo-class.
If the <a> tag has a name and that name is the text after the # and there is no other element with an id equal to the text after the #, then the a receives the :target.
That was confusing, so here's an example:
<style>
* {
color: black;
}
:target {
color: red;
}
</style>
<div id="wrapper">
<ul>
<li>one_link</li>
<li>two_link</li>
<li>three_link</li>
</ul>
<div id="one">div_one</div>
<div id="two_div">div_two</div>
<div id="three_div">div_three</div>
</div>
If you were to click on the "one_link," then "div_one" would turn red. However, if you were to click on "two_link" or "three_link," then they themselves would turn red (because there isn't a div with the id of the # string, but they have the name of the # string)
What I want is for the :target class to work on both the anchor and the div, or at least a way to select the anchor only when the div is targeted. This can probably be done with Javascript, but I'm trying to use pure css.
Not in pure css. There's no way to "program" css to dynamically change a selector to add some extra text based on something that's been clicked. That's waaaay outside the scope of CSS. That's why there's Javascript.
You can exclude the anchor selection by using div:target
* {
color: black;
}
div:target{
color: red;
}
http://jsfiddle.net/
With the same technique you can try with a:target to get only the current targeted anchor
That's not really possible.
You can't use anything like :target ~ div, because of your HTML structure: there is no way to select a parent element. Even if that wasn't a problem, there's no automatic way to map "nth" a to "nth" div.
With license to change the HTML, I came up with this: http://jsfiddle.net/pA84B/ - it's nasty.
Just use JavaScript.
See Google: HTML, CSS, and Javascript from the Ground Up.
JavaScript is built for behavior and interaction. The Google guys explain it well (I think), plus Google is a bit more authoritative than me. You should use JavaScript for this.