I am using a React component that injects a <div tabindex="-1"> on my HTML. Then, every time I click an inner object it adds a blue border on the element, like the example below:
https://jsfiddle.net/zdtw7uq0/
Is it possible to remove this border?
You can use an attribute selector to turn the behavior off.
For all element with tabindex:
[tabindex] {
outline: none;
}
Only for elements with tabindex="-1":
[tabindex="-1"] {
outline: none;
}
.container {
width: 200px;
height: 100px;
padding: 100px;
background-color: #fff;
}
[tabindex="-1"] {
outline: none;
}
<div tabindex="-1">
<div class="container">
Something
</div>
</div>
Try this:
Code:
<div tabindex="-1" class="tab">
<div class="container">
Something
</div>
</div>
Style:
.container {
width: 400px;
height: 200px;
padding: 200px;
background-color: #fff;
outline:none;
}
.tab {
outline:none;
}
Related
As you can see on the pic, I want the "h" to be on the blue div, and the "ello" to be on the white part of the picture. I tried to float the "h" to the right, and then add a ::after with the content "ello" but that didn't work. How would I go about doing this?
.home-text-h1 {
position: relative;
top: 30%;
float: right;
font-size: 40px;
}
.home-text-h1::after {
content: "ello";
background-color: red;
}
<div>
<div class="left-margin">
<h1 class="home-text-h1">h</h1>
</div>
</div>
This is the typical html5 solution with the use of the mark tag, however anything that displays inline will work, you can also make use of a span tag.
<h1 className="home-text-h1">H<mark style="background: red;">ello</mark></h1>
Or with span tag:
<h1 className="home-text-h1">H<span style="background: red;">ello</span></h1>
A more "elaborate" example:
h1 {
background: blue;
display: inline-block;
}
h1:first-letter {
color: white;
}
<h1 className="home-text-h1">H<span style="background: red;">ello</span></h1>
Simple example with ::first-letter (not recommended as support is not good atm)
h1 {
background: red;
display: inline-block;
}
h1:first-letter {
background: white !important;
}
<h1>hello</h1>
First mistake you did was using the wrong attribute. It should be class and not className. Second is assuming that ::after isn't part of the "parent" element, but if you float something, then the ::after will count as part of the floated element. So your original idea didn't work. I placed the ::after after the actual container div and translated it to be outside the container. See the code below:
.left-margin {
position: relative;
width: 120px;
height: 140px;
background-color: #272343;
}
.left-margin::after {
content: "ello";
background-color: red;
transform: translateX(100%); /* move element it's own size to the right */
}
.left-margin::after, /* style the after element just like the h1 */
.home-text-h1 {
position: absolute;
top: 30%;
right: 0px; /* place to the right */
margin: 0px;
font-size: 40px;
font-weight: bold;
}
<div>
<div class="left-margin">
<h1 class="home-text-h1">h</h1>
</div>
</div>
you can assign nagative margin to home-text-h1
<div style="background:blue;width:200px;padding:20px;">
<div className="left-margin" style="background:red;width:100px;">
<h1 className="home-text-h1" style="margin-left:-20px">hello</h1>
</div>
</div>
Replace your code with below.
You can add another separate div in HTML. here is an example.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.home-text-h1 {
position: relative;
top: 30%;
float: right;
font-size: 40px;
}
h1{
display:inline;
float: left;
}
.home-text-h1::after {
content: "ello";
background-color: red;
}
</style>
</head>
<body>
<div>
<div className="left-margin">
<h1 className="home-text-h1">h</h1>
</div>
<div className="left-margin">
<h1 className="home-text-h1">ello</h1>
</div>
</div>
</body>
</html>
.whiteDiv {
background-color: white;
float: left;
}
.blueDiv {
background-color: blue;
float: left;
}
<div>
<div class="blueDiv">
<h1>h</h1>
</div>
<div class="whiteDiv">
<h1>ello</h1>
</div>
</div>
You can use :first-letter.
div {
background: red;
}
div.container {
padding: 20px 0 20px 20px;
background: #c3c3c3;
width: 200px;
}
h1 {
position: relative;
font-size: 40px;
padding: 0;
margin: 0;
color: #000;
line-height: 1.1;
}
h1::first-letter {
background: #fff;
height: 100%;
}
<div class="container">
<div>
<h1>hello</h1>
</div>
</div>
what goes wrong with my code? can anyone help me a bit?
want to show a div onclick other div.
nav div#showdiv {
width: 100px;
height: 100px;
background-color: #999;
outline: none;
cursor: pointer;
}
#hiddendiv {
display: none;
height: 200px;
background-color: #666;
color: #FFF;
}
nav div#showdiv:focus+section#hiddendiv {
display: block;
}
<nav>
<div id="showdiv">Click me</div>
</nav>
<section id="hiddendiv">
<div>Text</div>
</section>
I think I have some wrong selector code in the css. or is it not possible
to toggle a div in other container / div / section etc.
You cannot with just CSS.
This selector
nav div#showdiv:focus+section#hiddendiv
will not work because #hiddendiv is not a sibling of #showdiv, so you cannot target it with a +.
Also, clicking will not focus the element (unless it is an interactive element, like a button, or a input)
You can accomplish what you want by adding some Javascript that, as an example, add/remove a class after the click event.
document
.getElementById('showdiv')
.addEventListener('click', function() {
const hidden = document.getElementById('hiddendiv')
if (hidden.classList.contains('show')) {
hidden.classList.remove('show');
} else {
hidden.classList.add('show');
}
})
nav div#showdiv {
width: 100px;
height: 100px;
background-color: #999;
outline: none;
cursor: pointer;
}
#hiddendiv {
display: none;
height: 200px;
background-color: #666;
color: #FFF;
}
#hiddendiv.show {
display: block;
}
<nav>
<div id="showdiv">Click me</div>
</nav>
<section id="hiddendiv">
<div>Text</div>
</section>
You can use the jQuery toggle() method to toggle div on click.
$("#showdiv").click(function(){
$("#hiddendiv").toggle();
});
nav div#showdiv {
width: 100px;
height: 100px;
background-color: #999;
outline: none;
cursor: pointer;
}
#hiddendiv {
display: none;
height: 200px;
background-color: #666;
color: #FFF;
}
nav div#showdiv:focus+section#hiddendiv {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<div id="showdiv">Click me</div>
</nav>
<section id="hiddendiv">
<div>Text</div>
</section>
You can't use :focus ond div elements. Focus can only be used on elements that accept keyboard events or other user inputs.
You may want to try using javascript (jQuery) to do that:
$('#showdiv').click(function(e) {
$('#hiddendiv').show();
})
You can use .toggle() instead of .show() to switch between display: block; and display: none;
I want to change the background-color of a box after clicking on it and at the same time create another box with pure CSS. I tried it with the target selector. But I only can manage to do one of them asks and not both at the same time.
Here is a DEMO of my try.
/* fonts */
p {
font-size: 10px;
}
#school::after,
#work::after {
font-size: 10px;
content: "Second box";
color: white
}
/* white boxes */
.panel {
height: 50px;
width: 50px;
background-color: white;
border: 1px solid #262626;
position: relative;
}
/* span (100%, 100%) inside the white-boxes */
.panel span {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
/* second-box */
.panel div {
display: none;
}
/* if white-box is targeted, this lets the second-box appear */
.panel div:target {
display: block;
height: 50px;
width: 50px;
background-color: blue;
border: 1px solid black;
border-radius: 4px;
position: absolute;
left: 70px;
}
/* for testing purposes */
.panel:active span {
background-color: black;
}
<p>White Boxes</p>
<div class="panel">
<a href="#school">
<span></span>
</a>
<div id="school"></div>
</div>
<div class="panel">
<a href="#work">
<span></span>
</a>
<div id="work"></div>
</div>
You can modify the presentation of any number of elements using the :target pseudo-class, so long as each one is nested within the element with the id which is :targeted:
/* fonts */
p {
font-size: 10px;
}
#school div::after, #work div::after {
font-size: 10px;
content: "Second box";
color: white
}
/* white boxes */
.panel {
height: 50px;
width: 50px;
background-color: white;
border: 1px solid #262626;
position: relative;
}
/* span (100%, 100%) inside the white-boxes */
.panel span {
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
}
/* second-box */
.panel a div {
display: none;
}
/* if white-box is targeted, this lets the second-box appear */
.panel a:target div {
display: block;
height: 50px;
width: 50px;
background-color: blue;
border: 1px solid black;
border-radius: 4px;
position: absolute;
left: 70px;
}
/* if white-box is targeted, this gives the box a blue background */
.panel a:target span {
background-color: blue;
}
/* for testing purposes */
.panel:active span {
background-color: black;
}
<p>White Boxes</p>
<div class="panel">
<a href="#school" id="school">
<span></span>
<div></div>
</a>
</div>
<div class="panel">
<a href="#work" id="work">
<span></span>
<div></div>
</a>
</div>
:target is only for one element at same time, because you can't target two anchors at same time. You need javascript or a css trick with :checked
Solution with pure css :checked
http://jsfiddle.net/KNG6n/78/
What I make:
<div class="panel">
<label>
<input type="checkbox">
<div></div>
</label>
</div>
CSS
label {
display:block;
position: relative;
width: 100%;
height: 100%;
}
label input {
visibility: hidden;
}
label input:checked + div {
display: block;
}
I see an answer was accepted already, but will post my solution if anyone else is interested.
I changed the location of the div to be before the link and added a css rule.
new code:
<p>White Boxes</p>
<div class="panel">
<div id="school"></div>
<a href="#school">
<span></span>
</a>
</div>
<div class="panel">
<div id="work"></div>
<a href="#work">
<span></span>
</a>
</div>
CSS added:
.panel div:target+a span{
background-color: black;
}
Demo:
http://jsfiddle.net/KNG6n/81/
I have a div and inside this div there is an icon with background and text.
when clicking on this div I want to change 3 things:
the div background, the icon background and the text color.
how can I do it with CSS only?
http://jsfiddle.net/g1nrye8e/
<div class="click">
<div class="icon"></div>
<div class="text">text</div>
</div>
.click{
width: 200px;
height: 100px;
background: blue;
}
.icon{
width: 50px;
height:50px;
background: yellow;
display: inline-block;
}
.text{
color: #fff;
display: inline-block;
}
Preserve clicked state using pure CSS
The best way to preserve the clicked state, without JavaScript is to
wrap your elements inside a <label>
immediately before the element you want to target place an invisible input checkbox
when the input becomes :checked target any first next sibling element using +* and change styles accordingly
Repeat the same rule for +*'s inner elements:
/* DEFAULT STYLES */
.div{
width: 200px;
height: 100px;
background: blue;
margin:10px;
}
.icon{
width: 50px;
height:50px;
background: yellow;
display: inline-block;
}
.text{
color: #fff;
display: inline-block;
}
/* HIDE CHECKBOX HELPER */
label.click > input{ /* hide the input checkbox */
position:absolute;
visibility:hidden;
}
/* ACTIVE STYLES */
label.click > input:checked +* { /* (the next .div) */
background: #000;
}
label.click > input:checked +* .icon{
background: #c0ffee;
}
label.click > input:checked +* .text{
color: #f00ba4;
}
<label class="click">
<input type="checkbox"> <!-- :checked state changes +div styles -->
<div class="div">
<div class="icon"></div>
<div class="text">text</div>
</div>
</label>
<label class="click">
<input type="checkbox">
<div class="div">
<div class="icon"></div>
<div class="text">text</div>
</div>
</label>
Just add a class to the parent when it is clicked, then write more specific CS for that class.
Here's a running example.
document.querySelector(".click").addEventListener("click", function() {
this.classList.toggle("clicked");
});
.click{
width: 200px;
height: 100px;
background: blue;
}
.icon{
width: 50px;
height:50px;
background: yellow;
display: inline-block;
}
.text{
color: #fff;
display: inline-block;
}
.clicked.click{
background: green;
}
.clicked .icon{
background: red;
}
.clicked .text{
color: blue;
}
<div class="click">
<div class="icon"></div>
<div class="text">text</div>
</div>
This is a different solution with only css, but you have to click to every element:
.click{
width: 200px;
height: 100px;
background: blue;
}
.icon{
width: 50px;
height:50px;
background: yellow;
display: inline-block;
}
.text{
color: #fff;
display: inline-block;
}
.click:focus{
background: red;
}
.icon:focus{
background: grey;
}
.text:focus{
background: black;
}
<div class="click" tabindex="1">
<div class="icon" tabindex="2"></div>
<div class="text" tabindex="3">text</div>
</div>
There is a great explanations about the tabindex and :focus without using JS. Check it out impressivewebs
Here is a fiddle of the below:
.filterDivActual, #filterSeparator {
display: inline-block;
}
.filterDivActual {
border: 2px solid grey;
width: 15%;
height: 50px;
line-height: 50px;
color: grey;
position: relative;
}
#filterSeparator {
height: 50px;
width: 5px;
background-color: black;
}
<div id='filterDiv'>
<div class='filterDivActual'>Top</div>
<div class='filterDivActual'>New</div>
<div id='filterSeparator'></div>
<div class='filterDivActual'>Today</div>
<div class='filterDivActual'>Yesterday</div>
<div class='filterDivActual'>None</div>
</div>
What I want is for the #filterSeparator to be aligned with the other divs.
For some reason, all the other divs are below the #filterSeparator.
If I put text inside #filterSeparator, then it works.
Is there a way for me to get it to work without placing any text inside #filterSeparator?
fiddle
For inline / inline-block elements, use the vertical-align property:
.filterDivActual, #filterSeperator {
display: inline-block;
vertical-align: middle ; /* or some other value: */
}
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
I don't know why it does this but you can fix it by using float:left; instead of display:inline-block
Putting content in the empty <div> will fix it.
<div id='filterSeperator'> </div>
#filterSeparator:before {
content: ".";
visibility: hidden;
}
.filterDivActual, #filterSeparator {
display: inline-block;
}
.filterDivActual {
border: 2px solid grey;
width: 15%;
height: 50px;
color: grey;
position: relative;
}
#filterSeparator {
height: 50px;
width: 5px;
background-color: black;
}
#filterSeparator:before {
content: ".";
visibility: hidden;
}
<div id='filterDiv'>
<div class='filterDivActual'>Top</div>
<div class='filterDivActual'>New</div>
<div id='filterSeparator'></div>
<div class='filterDivActual'>Today</div>
<div class='filterDivActual'>Yesterday</div>
<div class='filterDivActual'>None</div>
</div>