.close {
font-size: 50px;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<span class="close">×</span>
</body>
</html>
So basically there is a padding on the top and bottom I want to remove. I tried with line heights but it didn't work. How do I do that?
display:inline-block first then you can play with line-height
.close {
font-size: 50px;
background-color: red;
display: inline-block;
line-height: 0.5;
}
<span class="close">×</span>
This works without extra padding when selected:
.close {
font-size: 50px;
background-color: red;
float: left;
line-height: 30px;
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<span class="close">×</span>
</body>
</html>
.close {
font-size: 50px;
background-color: red;
display: inline-block;
line-height: 0.5;
}
.close::selection{
background: none;
color: yellow;
}
<span class="close">×</span>
What you are looking for is ::selection property of CSS. You can write custom CSS within this and your selected element will behave the same.
Related
As you can see in the CSS below, I have the height set to "50vh" which is causing the hover selector to be triggered underneath and over the text rather than just on the text. I have tried to lower the height but it moves the text upwards. Is there a way to stop it from triggering unless the cursor is over the actual text while still keeping the text lowered?
body {
background-color: #efefef;
overflow: hidden;
}
.logo h1 {
align-items: center;
color: #262626;
display: flex;
font-family: 'Lato', sans-serif;
font-size: 72px;
font-weight: 700;
height: 50vh;
justify-content: center;
max-width: 100px;
margin: auto;
}
.logo h1:hover {
color: #FFFFFF
}
<!DOCTYPE html>
<html>
<head>
<title>
Bindex. | Home
</title>
<link rel="icon" type="image/x-icon" href="favicon.png">
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
<body>
<div class="logo">
<h1>
B.
</h1>
</div>
</body>
</html>
Give this a try. You should set the flex properties on the parent div only, and not the h1. This way, you can manipulate the height of the h1 and the width in which the :hover is activated.
body {
background-color: #efefef;
overflow: hidden;
}
.logo {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
h1 {
color: #262626;
font-family: 'Lato', sans-serif;
font-size: 72px;
font-weight: 700;
height: fit-content;
width: fit-content;
}
.logo h1:hover {
color: #FFFFFF
}
<!DOCTYPE html>
<html>
<head>
<title>
Bindex. | Home
</title>
<link rel="icon" type="image/x-icon" href="favicon.png">
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
</head>
<body>
<div class="logo">
<h1>
B.
</h1>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
color: white;
background-color: #1E1B1B;
border-color: grey;
}
.navbar {
height: 50px;
border-bottom: 2px solid grey;
margin-bottom: 10px;
display: block;
}
button.nav-btn {
float:right;
background-color: transparent;
border: 1px solid grey;
color: white;
padding: 5px 12px;
font-size: 30px;
cursor: pointer;
float: left;
}
</style>
<script>
function toggleToolNav() {
var dis = document.getElementsByClassName("navbar")[0]
alert(dis.style.display)
}
</script>
</head>
<body>
<div class="navbar">
<button class="drop-down-toggle" onclick="toggleToolNav()"><i class="fa fa-bars"></i></button>
</div>
</body>
</html>
When the top left button is pressed, the alert popup box prints nothing indicating that navbar has no display. But navbar is a div element with display = block explicitly set in the CSS code.
You're not returning a value because the style attribute does not contain any value in this instance. If for example we move the display: block to the element as a style attribute like style="display: block" then it would return the value as you expect. See example provided, but the behavior is expected.
Hope this helps, cheers!
PS - a div is a block element by default, no need to define it in the css unless you're overriding the default for whatever reason.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
color: white;
background-color: #1E1B1B;
border-color: grey;
}
.navbar {
height: 50px;
border-bottom: 2px solid grey;
margin-bottom: 10px;
}
button.nav-btn {
float:right;
background-color: transparent;
border: 1px solid grey;
color: white;
padding: 5px 12px;
font-size: 30px;
cursor: pointer;
float: left;
}
</style>
<script>
function toggleToolNav() {
var dis = document.getElementsByClassName("navbar")[0];
console.log(dis);
alert(dis.style.display);
}
</script>
</head>
<body>
<div class="navbar" style="display: block">
<button class="drop-down-toggle" onclick="toggleToolNav()"><i class="fa fa-bars"></i></button>
</div>
</body>
</html>
Looks like you want to get the CSS computedStyle. You can use getComputedStyle to return an object containing the values of all CSS properties of said element.
getComputedStyle(dis, "display").display
Will return the display rule set in your elements css. As Chris W explained in the prior answer if you use el.style.display, it is looking for the inline style rule for display.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
color: white;
background-color: #1E1B1B;
border-color: grey;
}
.navbar {
height: 50px;
border-bottom: 2px solid grey;
margin-bottom: 10px;
display: block;
}
button.nav-btn {
float:right;
background-color: transparent;
border: 1px solid grey;
color: white;
padding: 5px 12px;
font-size: 30px;
cursor: pointer;
float: left;
}
</style>
<script>
function toggleToolNav() {
var dis = document.getElementsByClassName("navbar")[0]
alert(getComputedStyle(dis, "display").display)
}
</script>
</head>
<body>
<div class="navbar">
<button class="drop-down-toggle" onclick="toggleToolNav()"><i class="fa fa-bars"></i></button>
</div>
</body>
</html>
I need to check colour of the X in ionicon but can't change the x itself. I can either change the background-color or actual color of the circle.
Is there a way to change ONLY the x?
body {
background-color: lightgreen;
}
.ion-ios-close-circle.a {
color: white;
font-size: 50px;
}
.ion-ios-close-circle.b {
background-color: white;
font-size: 50px;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/ionicons#4.4.8/dist/css/ionicons.min.css" rel="stylesheet">
</head>
<body>
<div>
<i class="a ion-ios-close-circle"></i>
<i class="b ion-ios-close-circle"></i>
</div>
</body>
</html>
So eventually I need to achieve this
You could use a border radius with the background-colour and absolute poitioning to centre the icon:
body {
background-color: lightgreen;
}
.ion-ios-close-circle {
font-size: 50px;
border-radius: 50%;
overflow: hidden;
width: 35px;
height: 35px;
display:inline-block;
position: relative;
}
.ion-ios-close-circle:before {
display:inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.a {
background-color: white;
}
.b {
background-color: orange;
}
/* ie11 only move icon down 1px */
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
_:-ms-fullscreen, :root .ion-ios-close-circle:before {
margin-top:1px;
}
}
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/ionicons#4.4.8/dist/css/ionicons.min.css" rel="stylesheet">
</head>
<body>
<div>
<i class="a ion-ios-close-circle"></i>
<i class="b ion-ios-close-circle"></i>
</div>
</body>
</html>
Seems like the SVG of ionicons isnt rounded, you can try with FontAwesome
body {
background-color: lightgreen;
}
.fas.fa-times-circle.c {
background-color: white;
color: blue;
font-size:50px;
border-radius:50%;
border: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<div>
<i class="c fas fa-times-circle"></i>
</div>
</body>
</html>
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 5 years ago.
I have 2 page blocks each made of 3 spans. One span is containing 2 other spans. What I am trying to achieve is to get rid of the gap between these 2 blocks. Have a look at the example. The margins and paddings are set to zero.
.wrapper {
display: inline-block;
background-color: grey;
padding: 25px;
width: 50%;
}
.olive {
display: block;
height:50px;
line-height: 50px;
padding: 0px;
margin: 0px;
float: left;
background-color: olive;
}
.blue {
display: block;
height:50px;
line-height: 50px;
width: 50px;
padding: 0px;
margin: 0px;
float: right;
background-color: #BCDBEA;
text-align: center;
border-radius: 50%;
cursor: default;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<span class="wrapper">
<span class="olive">The box with some text</span>
<span class="blue">?</span>
</span>
<span class="wrapper">
<span class="olive">The box with some text</span>
<span class="blue">?</span>
</span>
</body>
</html>
It's the "line descenders space", where the down part of p, g or j goes. Span in "inline" element, so it is placed "in the line" as if they where letters. The inline-block also is "inline", just change "where" it is placed on the line: Vertical align is "baseline" as default for inline elements, try vertical-align:bottom
You can also deal with line-heigth:0 (so there is no descenders space) or display:block and "float"
.wrapper {
display: inline-block;
background-color: grey;
padding: 25px;
width: 50%;
vertical-align:bottom;
}
.olive {
display: block;
height:50px;
line-height: 50px;
padding: 0px;
margin: 0px;
float: left;
background-color: olive;
}
.blue {
display: block;
height:50px;
line-height: 50px;
width: 50px;
padding: 0px;
margin: 0px;
float: right;
background-color: #BCDBEA;
text-align: center;
border-radius: 50%;
cursor: default;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<span class="wrapper">
<span class="olive">The box with some text</span>
<span class="blue">?</span>
</span>
<span class="wrapper">
<span class="olive">The box with some text</span>
<span class="blue">?</span>
</span>
</body>
</html>
You are using display: inline-block, which preserves the whitespace/descenders between the blocks. Add an outer wrapper and set the font-size to 0, this negates the white space (you then have to reset the font size on wrapper),e.g.
.wrapper {
display: inline-block;
background-color: grey;
padding: 25px;
width: 50%;
font-size: 1rem;
}
.olive {
display: block;
height:50px;
line-height: 50px;
padding: 0px;
margin: 0px;
float: left;
background-color: olive;
}
.blue {
display: block;
height:50px;
line-height: 50px;
width: 50px;
padding: 0px;
margin: 0px;
float: right;
background-color: #BCDBEA;
text-align: center;
border-radius: 50%;
cursor: default;
}
.outer-wrapper {
font-size: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="outer-wrapper">
<span class="wrapper">
<span class="olive">The box with some text</span>
<span class="blue">?</span>
</span>
<span class="wrapper">
<span class="olive">The box with some text</span>
<span class="blue">?</span>
</span>
</div>
</body>
</html>
I'm looking to make a html button darken in colour when hovered over.
The code I'm using is below:
<div style="width: 200px; color: white; background-color: #bf8f42; opacity: 0.8; margin: auto; margin-top: 0px; padding: 20px;">Training</div>
you can give a class to your div element and add some styling in style tag in tag.
Here is full HTML code for the button with a bit darken on hover
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.btn-training
{
width: 200px;
color: white;
background-color: #bf8f42;
opacity: 0.8;
margin:0 auto;
padding: 20px;
text-align: center;
}
.btn-training:hover
{
background-color: #9f7f31;
}
</style>
</head>
<body>
<div class="btn-training">Training</div>
</body>
</html>
Try out this part of code:
<style>
div:hover{
background-color: #000000;
}
</style>
Try something like this,
div:hover{
background-color: #000000;
opacity:1;
}
This code might help you for changing colors while hovering
<!DOCTYPE html>
<html>
<head>
<style>
input:hover {
background-color: yellow;
}
</style>
</head>
<body>
<input type="button" />
</body>
</html>
Explanation:
When the user hovers over the class (test) it triggers the css element .test:hover. :hover is a anchor pseudo-class. you can use these types of classes in various ways Shown Here.
.test:hover {
background: #000000;
}
<div class="test">text</div>
Try this solution:
.btn-test {
width: 200px;
color: white;
background-color: #bf8f42;
opacity: 0.8;
margin: auto;
margin-top: 0px;
padding: 20px;
}
.btn-test:hover {
background-color: #a26d19;
}
<div class="btn-test">Training</div>