Is there a way to apply the ::selection and ::-moz-selection CSS pseudo-elements to the text inside a textarea?
textarea::selection {
color: #ff0000;
}
Isn't working
According to this, it should work.
Can you try giving it an !important?
Can you try applying it to a different element than a textarea, e.g. a div? If it works there, it works differently for input elements - but I can't find any resources mentioning that.
Updated as you said here, I'll update this question too:
I disagree. It is working ;)
Tested on Firefox 4.0b6
I can confirm the following code works at least under Firefox 4.0b6 (Taken from my own answer)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<style type="text/css">
p::-moz-selection, input::-moz-selection, textarea::-moz-selection {
color: red;
background-color: grey;
}
</style>
</head>
<body>
<p>This paragraph is selection-aware.</p>
<form action="#">
<input type="text" id="itext" value="So is this input[text]" />
<textarea id="itextarea">And this textarea, as well</textarea>
</form>
</body>
</html>
It may not be wroking programmatically, if you are not careful with what you are doing. Maybe you are trying to select something with jQuery.select() and you are selecting the textarea object instead of its content.
Related
Summary of the problem
The following image is a description of bootstrap icon.
I don't know how to use "Code point".
Unicode: U+F120
CSS: \F120
JS: \uF120
HTML: 
For Using HTML code point, All you need is just set the the font-family of your element(or your body) to 'Bootstrap-icons' and then everything will work.
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<style>
.test
{
font-family:'Bootstrap-icons';
}
</style>
<body>
<div class="test">

</div>
</body>
</html>
I managed to find how to use CSS of "code point".
Add following html into the head element of document.
Set font-family to be Bootstrap-icons.
And you can use css code point \F120 to fill the value of content property.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.0/font/bootstrap-icons.css">
<style>
h3::before {
font-family:'Bootstrap-icons';
content:'\F120';
}
</style>
The otheres (Unicode, JS, HTML) are still ununderstood.
Thank you for reading my broken English! :)
I need to mix English text with and Japanese kanjis in the same text (paragrah).
I found on W3C (https://www.w3.org/TR/1999/WD-i18n-format-19990127/) the CSS property layout-grid-type, which when set to 'fixed' seems to do exactly what I need.
I tried the below code sample but I cannot get it work as expected, like this for example.
All characters (roman, kanjis and even symbols) must have the same bounding box width (whatever the spacing in between).
<head>
<style>
.example {
layout-grid-type: fixed;
}
</style>
</head>
<body>
<div class="example">layout-grid-typeこ子: fixed</div>
</body>
What am I misisng here ?
Thank you.
[edit] I realized the W3C doc above was a draft, seems was not released as it. Any aternative then for that presentation style ?
Thank you Kevin, the blog clarified it all !
This header is enough to get is all addressed : all chars and symbols have the same width now.
[EDIT]: This works in Firefox only ! Chars width is not same in other browsers...
Back to original question :(
<!doctype HTML>
<html lang="ja-jp" />
<head>
<meta charset="utf-8" />
<style>
.example {
text-transform: full-width;
white-space: pre;
}
</style>
</head>
<body>
<div class="example">layo↑t-grid-typeこ子: fixed</div>
<div class="example">layo ut-grid-typeこ子: fixed</div>
<div class="example">123456789012345678901234567890</div>
<div class="example"> 56789012345678901234567890</div>
<div class="example">↑↑←→↓↑↑56789012345678901234567890</div>
<div class="example">↑↑↑↑56789012345678901234567890</div>
</body>
I'm doing something like this however, the word world won't appear. having that rule declare in the head css, it works fine.
can anyone explain this to me?
<span id="aa" style="#aa::after{content=" world";}">hello</span>
No. The style attribute only defines style properties for a given HTML element. Pseudo-classes are a member of the family of selectors, which don't occur in the attribute.
The style attribute doesn't accept selectors. It only accepts the rules to apply to the current element. You can't do this with a style attribute.
Working jsFiddle Demo
You must separate your CSS from your HTML:
<!doctype html>
<html>
<head>
<title>My Web Page</title>
<style>
#aa:after {
content: 'world';
}
</style>
</head>
<body>
<span id="aa">hello</span>
</body>
</html>
It's also better to create a file with .css extension, for example styles.css,
and put the style in it:
#aa:after {
content: 'world';
}
And in your HTML, link to this file:
<!doctype html>
<html>
<head>
<title>My Web Page</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<span id="aa">hello</span>
</body>
</html>
Be sure that your html and css file are in the same folder.
The style attribute applies styles to the current element; it cannot contain complete style sheet rules with selectors.
Although the selector in this case happens to match the same element, if it were possible, you would also be able to do this, which would make very little sense:
<div id="one" style="#two { display: none; }"></div>
... much content ...
<div id="two">Huh?</div>
Is it possible to inline a class definition of CSS inside an xhtml file?
I mean, to put someting like:
p.first{ color: blue; }
p.second{ color: red; }
Inside my page, not in a separate CSS file.
I think you're trying to put your CSS in the HTML page, not inline.
You can put CSS in an HTML page (usually in the head) by surrounding it in style tags:
<style type="text/css">
p.first{ color: blue; }
p.second{ color: red; }
</style>
Sure, here's an example. However, it is best practice to keep your styles in a separate css file.
<html>
<head>
<title>Classes</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<style type="text/css">
img {
padding:10px;
margin:5px;
border:1px solid #d5d5d5;
}
div.thumb {
float:left;
}
div.caption {
padding-left:5px;
font-size:10px;
}
</style>
</head>
<body>
<div>your page code etc..</div>
</body>
</html>
You can also put css inside the p tag.
<html>
<body>
<p class="first" style="color:blue;"></p>
<p class="second" style="color:red;"></p>
</body>
</html>
The nice thing about CSS is it works in any file not just an HTML,XML file. You just need to define the syle block like this anywhere in the page
<style type="text/css">
<all my styles goes here>
</style>
In HTML and HTML/XHTML, the standard is, you will put this block in the head section. If it is other type of file for example .aspx, or .php, the block still works, even it is not in head block.
Example
<?php
/* mytest.php file */
<style>
<my styles>
</style>
?>
the same is true for ASPX file.
You can also define inline CSS which means CSS goes right in the element tag. The syntax is
<p style="<all my styles>"> My paragraph contain inline CSS</p>
Yes, you can insert CSS styles in the HTML file. For example:
<p>...</p>
<style type="text/css">
p.first { ... }
</style>
<div>...</div>
As you'll find in the literature, it's not considered a good practice though.
The below code is not working in Internet Explorer 6. I can't put class or id in it. Are there any CSS hacks for that?
This code is in WordPress. I can't modify the code; I can only modify the CSS.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
form input[type=submit]{
background-color:#FE9900;
font-weight:bold;
font-family:Arial,Helvetica,sans-serif;
border:1px solid #000066;
}
</style>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<FORM action="">
<INPUT type=text name=s>
<INPUT type=submit value=Search>
</FORM>
</body>
</html>
Instead, give the input a class, and then style it from there. Like this:
<input type="submit" class="myClass" value="Search" />
And then style the .myClass in your CSS. This should also work in IE6.
You're right, it doesn't work.
Quirksmode.org is an excellent site with browser compatibility info:
http://www.quirksmode.org/css/contents.html
The Internet Explorer 6 doesn’t support the attribute selector [attr="value"]. So there is no way to address that submit input element with CSS only (IE 6 doesn’t support the adjacence selector + and :last-of-type selector neither that would help in this case).
So the only options you have is to either make that element uniquely addressable by adding a class or ID or wrapping it into an additional span element.
Or – as you’ve already stated that you can’t do that – use JavaScript to select that element and apply the CSS rule to it. jQuery can make this fairly easy:
$("form input[type=submit]").css({
"background-color": "#FE9900",
"font-weight": "bold",
"font-family": "Arial,Helvetica,sans-serif",
"border": "1px solid #000066"
});