I add some content to a span-element with ::after as a sort of tooltip.
As that after-content is bigger then the span-element itself and it's not within the span-elements boundary, it is not clickable.
I'd need to make the after-elements (or its boundaries) clickable too. How could I do that?
I guess it's not so important but here is the ::after-"code":
span.link_wer::after{
content:'What is it actually?';
vertical-align:1.8em;
font-size:0.2em;
margin-left:-80px;
border-bottom: 1px solid $color_3;
padding:5px 10px;
background:red;
transition:0.3s;
opacity:0.2;
}
And here is the markup
<h3>We can move <span class="link_wer">it<span> easily.</h3>
So I get sort of tooltip over the word "it" and while "it" triggers a link, the after-content "What is it actually?" doesn't as it is intentionally lying off its parent elements boundary. What can I do to solve that?
Pseudo-elements belong to their parents, so if their parent is clickable (button, a) then you can make them clickable. So, what you could do is make that pseudo-element of a than span.
span.link_wer a {
position: relative;
text-decoration: none;
color: red;
}
span.link_wer a::after{
content:'What is it actually?';
vertical-align:1.8em;
font-size:0.2em;
margin-left:-80px;
border-bottom: 1px solid red;
padding:5px 10px;
background: rgba(255, 0, 0, 0.5);
transition:0.3s;
color: white;
font-size: 10px;
}
As always, things are pretty simple once you're trying. Of course the organisation of my markup was wrong. So if you actually do
<h3>We can move <span class="link_wer">it<span> easily.</h3>
instead of
<h3>We can move <span class="link_wer">it<span> easily.</h3>
by swapping href and span (or which ever element you're using as the container for the :after or :before-content) you're good to go. Which makes sense.
Try like this. I have just changed your markup and CSS property a bit. I hope this will help you.
span.link_wer::before{
content:'What is it actually?';
vertical-align:1.8em;
font-size:0.5em;
border-bottom: 1px solid $color_3;
padding:5px 10px;
background:red;
transition:0.3s;
opacity:0.2;
position: absolute;
top: 3px;
color: aqua;
}
#target_options {
position:relative;
}
<h3>We can move <span class="link_wer">it<span> easily.</h3>
Related
I'm not sure how to deal with anything(except images) that is used for design/decoration only in terms of accessibility. For example, if in case like this I'll use an image, I'd simply use alt="" or use CSS background image, so the AT for example will ignore it. But what if I'm using some <div> or anything else? It can be a div with some CSS styling that is presented in a code-way, instead of image, or it can be some text with CSS styling so it will be just for decoration(instead of images), or really, anything else. How should I mark it so it will be ignored in a proper way by AT?
Simple example(for request):
<div><span>For Decoration</span></div>
div{
width:0; height:0;
border-bottom:116px solid #009;
border-left:500px solid #900;
margin:0 auto;
}
div span{
display:block;
position:absolute;
margin:0 auto;
left:0;
right:0;
width:150px;
color:#fff;
}
There are two solutions to this:
1) if you are using an empty tag such as a div with no text in it, the screen reader will ignore it automatically. You don't need to do anything in particular.
2) if you are using a tag with text inside you should: a) give it an aria-hidden="true" if you don't want the screen-reader to read the text or b) give it a role="presentation" if you do want the screen-reader to read the text but not announce it as a particular type of element.
-------------------
Based on the comments on this post I have added code below showing an example. It shows when you wouldn't need to do anything (the first and last div) and when you would want to use aria-hidden and role="presentation".
The top line is purely for decoration. Part of it is empty divs and part of it is text. The different words for "Hello" in the p tag should be seen but don't need to be read since they're purely ornamental which is why I am using role and aria-hidden on it.
.end {
display: inline-block;
width: 5%;
height: 20px;
border: 5px solid transparent;
}
.end-left {
border-left-color: #999;
border-top-color: #999;
}
.end-right {
border-right-color: #999;
border-top-color: #999;
}
.languages {
display: inline-block;
width: 80%;
text-align: center;
font-family: 'copperplate', 'century gothic';
color: #999;
}
.languages span {
display: inline-block;
width: 15%;
}
<div class="end end-left"></div>
<p class="languages" aria-hidden="true" role="presentation">
<span class="english">Hello</span>
<span class="french">Bonjour</span>
<span class="italian">Ciao</span>
<span class="spanish">Hola</span>
<span class="hinid">Namaste</span>
<span class="persian">Salaam</span>
</p>
<div class="end end-right"></div>
<h1>Languages</h1>
<p>Welcome to your first language lesson. You will learn how to speak fluently.</p>
Styled my checkboxes like buttons as suggested here in this article:
CSS: styled a checkbox to look like a button, is there a hover?
Now I've been trying to add some margin to the buttons. This won't work, as soon as the button is selected, only the area without margin is highlighted. This looks awfull...
#ck-button label span {
text-align:center;
padding:3px 0px;
display:block;
margin: 10px;
}
See here: http://jsfiddle.net/Vq759/
Anyone know how to solve this?
Thanks mates :)
I think you're overcomplicating things with your HTML/CSS, here's a quick re-do with how I'd style a checkbox (which is completely customizable to suit anything you need).
Simple HTML:
<input type="checkbox" value="1">
<label>Red</label>
I start styling the checkbox by simply hiding it:
input[type="checkbox"] {
display: none;
}
This leaves optional events/states like :checked intact.
From here I style the entire object to suit my needs, for example:
input[type="checkbox"] + label {
display:inline-block; /* or block */
line-height:normal;
cursor:pointer;
padding: 3px 14px;
background-color: #EFEFEF;
border-radius: 4px;
border: 1px solid #D0D0D0;
margin: 40px 100px 10px 40px; /* however you please */
}
/* hover event */
input[type="checkbox"] + label:hover {
border-color: #000;
background-color: #911;
color: #fff;
}
/* checked checkbox */
input[type="checkbox"]:checked + label {
border-color: #000;
background-color: #888;
color: #fff;
}
Margin works flawlessly.
Fiddle: http://jsfiddle.net/8e5Xa/
If you are trying to make the button essentially bigger and still make the whole thing highlight onClick, use padding instead of margin:
#ck-button label span
{
padding: 10px;
}
Margin puts white-space around an element. Padding puts white-space within an element.
JSFiddle
The + operator in this selector:
#ck-button input:checked + span
.. does not function properly in older browsers. It sort of works, but has bugs when doing the kind of thing you're trying to do here (in particular, changing the :checked state of the adjacent element). Sorry, but what you're trying to do is impossible if you want all browsers to be supported.
You will need to use JavaScript if you want the text colour of the span to change when selected in all browsers.
Alternatively, you could pick a colour scheme where it looks OK if the span doesn't change colour, but do change the colour in browsers that support it.
If it changing the margin of the button, do this:
#ck-button {
margin:40px;
background-color:#EFEFEF;
border-radius:4px;
border:1px solid #D0D0D0;
overflow:auto;
float:left;
}
Also have a look at this:
This is the box-model for every HTML element
I know select boxes are a bit of a pain to style with css, but without resorting to advanced techniques is there anyway I can add some padding to push down the text a bit without it also adding padding to the arrow on the right hand side?
add this to your CSS class. Maybe this helps?
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
Since select boxes appear differently on different browsers and especially operating systems, you cannot guarantee a consistency.
For example, the minimal amount of formatting I can do on a mac is this:
select { height:40px; background:transparent; }
And it looks like this:
#Demilio's answer is great for hiding the default selectbox. With custom styling you can then change the appearance of the selectbox as you wish.
The only remaining problem is the arrows/caret which are also gone, as mentioned by #romainnm.
Unfortunately pseudo elements (e.g. :after) don't work on a select element, so the only way around it is to create an actual element after the select, something like <div class="Caret"></div>.
Add some stylying:
.Caret {
display: block;
position: absolute;
cursor: pointer;
right: 1rem;
top: 50%;
margin-top: -1px;
width: 0;
height: 0;
border-top: 5px solid #000;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
And this should result in a custom styled select box with arrows:
Unfortunately the only downside is clicking on the arrow won't open the selectbox, and that also doesn't appear to be possible to tackle with JavaScript.
Interesting test here
http://cssdeck.com/labs/styling-select-box-with-css3
The author covered the arrow on the right hand side and created its own, using vendor prefixed css to target different browsers. after doing that, your padding is all free.
You can use border to add padding to your select element and outline for adding the border itself
.select {
border: 12px solid #FFF;
outline: 1px solid #000;
}
taking that you have a white background, this will work as 12px padding but it also adds padding to the arrow
select {
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
-webkit-appearance: none;
background-position-x: 97%;
}
I know you can draw with a canvas element, I just wanted to know if it was possible to draw a triangle next to a link without using a canvas element? I just want a small < 16px down arrow.
Here is my take on drawing a triangle in css. You can view it on JSFiddle. Have not done any browser testing (works in Chrome!)
The CSS is pretty simple:
.triangle{
display: block;
border-bottom: 16px solid transparent;
border-left: 16px solid red;
overflow: hidden;
position: absolute;
}
If you want it pointing in a different direction, just alter the borders. For example, the following will point the triangle downward:
.triangle{
display: block;
border: 16px solid transparent;
border-top: 16px solid red;
overflow: hidden;
position: absolute;
}
Edit: Works in latest IE, FF and Chrome.
Nope.
The closest you could get is by using an ASCII key, ↓ to be precise.
It produces an arrow like this ↓
Of course a background-image will do the trick, but that's quite obvious, innit? :)
U+25BC: Black Down-Pointing Triangle exists in Unicode. Here it is: ▼
You could use this CSS to apply it:
a:before {
content: "▼";
}
It's probably better to use a background-image though. That way, you would not depend on the existence of such special characters in the font the web browser uses, and it would show up in IE 6/7. For example:
a {
background-image: url("arrow.gif");
padding-left: 16px;
}
No. Just use a special ASCII character, &#darr;, no CSS required:
<span id = "down-arrow">&#darr;</span>
Here's my simple drawing for the triangle using CSS:
<div style="border: 11px solid transparent; border-right-color: rgba(0, 0, 0, 0.25);"></div>
If you need to change the direction, just replace border-right-color with border-direction-color.
And maybe you use position: absolute; and margin-top and margin-left properties to set the position.
How do I square the corners of a submit button? Can it be done with CSS? I just noticed that Stackoverflow buttons are pretty much the same thing (don't close it for mentioning SO, just want to illustrate what I mean).
Use the following field and command in your css:
border-radius: 0;
Just add CSS to it, and the default look will dissappear.
input.button, input.submit {
border: 1px outset blue;
background-color: lightBlue;
}
edit: changed the selector to use class name instead, as suggested in comments.
You could use the HTML element instead of input type. It's quite easy to style that one.
If you specify the height and width in the css, you'll make the corners square, and retain the certain level of automatic fancy-ness that normal buttons have... and that way, you wont have to build your own.
input.button, input.submit {
height: 30px;
width: 20px;
}
I seem to remember this only working if the height is large enough, but it might work any which way.
Use border: 1px solid for the element.
<a class="test">click me</a>
<style>
.test
{
cursor: pointer;
background-color:#E0EAF1;
border-bottom:1px solid #3E6D8E;
border-right:1px solid #7F9FB6;
color:#3E6D8E;
font-size:90%;
line-height:2.2;
margin:2px 2px 2px 0;
padding:3px 4px;
text-decoration:none;
white-space:nowrap;
}
</style>
This is how a stackoverflow button is made.