I created a custom 'searchbox'. The 'searchbox' actually built by a div and input text inside it.
Later on I will add a 'search' icon on the left and 'clear' button on the right.
The issue is, the input inside the div already sized based on it's container and when I'm focusing the input text, I couldn't find a way to expand the parent div (instead of the input itself). It's important the div will expand so the icons and buttons I will later add - will expand with the input.
Couldn't find a way doing it with CSS only (without JS).
Will appreciate your assistance!
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.App {
width: 100%;
height: 200px;
background-color: tan;
}
.fieldcontainer {
display: flex;
padding-left: 8px;
background-color: #CCCCCC;
border-color: grey;
width: 300px;
min-height: 35px;
align-items: center;
justify-content: space-between;
border-radius: 8px;
cursor: default;
transition: 'background-color' 0.4s;
}
.fieldcontainer:hover {
background-color: #C3C3C3;
}
.searchfield {
background-color: inherit;
font-size: 1em;
border: 0;
flex-grow: 8;
transition: all 0.4s linear;
}
.searchfield:focus {
outline: none;
width: 100%;
}
</style>
</head>
<body>
<div class="App">
<div class="fieldcontainer">
<input class="searchfield" type="text" placeholder="search" />
</div>
</div>
</body>
</html>
Use focus-within (https://developer.mozilla.org/fr/docs/Web/CSS/:focus-within)
* {
box-sizing: border-box;
}
.App {
height: 200px;
background-color: tan;
}
.fieldcontainer {
display: flex;
padding-left: 8px;
background-color: #CCCCCC;
border-color: grey;
width: 300px;
min-height: 35px;
align-items: center;
justify-content: space-between;
border-radius: 8px;
cursor: default;
transition: 0.4s;
}
.fieldcontainer:hover {
background-color: #C3C3C3;
}
.searchfield {
background-color: inherit;
font-size: 1em;
border: 0;
flex-grow: 8;
transition: all 0.4s linear;
outline:none;
}
.fieldcontainer:focus-within {
width: 100%;
}
<div class="App">
<div class="fieldcontainer">
<input class="searchfield" type="text" placeholder="search" />
</div>
</div>
Related
I've searched around and checked various answers, but I'm having trouble with the following:
There are a couple caveats
Can't use Javascript or Jquery.
has to be pure CSS.
I want the background color of the label to change from Blue to Orange after the input is selected. It does not seem to work and I've checked around and read several answers from people, but none of them have worked for me and I'm not sure what I'm doing wrong.
The CSS:
.header-tabs-container {
position: relative;
float: center;
left: 25%;
clear: both;
z-index: 2;
border-collapse: collapse;
white-space: normal;
border: unset;
}
/* tabs names */
.header-tabs-container .header-label {
position: relative;
padding: clamp(-1.5rem, -3.2rem + 8.8889vw, 3rem);
font-size: clamp(0.95rem, -0.925rem + 8.333vw, 3rem);
background-color: blue;
color: #fff;
cursor: pointer;
user-select: none;
text-align: center;
z-index: 1;
margin: 0px;
border: white 1px solid;
white-space: nowrap;
border-radius: 40px 40px 0px 0px;
}
/* Hover effect on tabs names */
.header-tabs-container .header-label:hover {
background: orange;
color: blue;
transition: 0.2s;
}
/* Content area for tabs */
.header-tab-content {
position: relative;
background: #eee;
margin-top: -10px;
width: 100%;
min-height: 100vh;
padding: 0px;
float: left;
box-sizing: border-box;
z-index: 2;
display: none;
white-space: nowrap;
border: 1px solid blue;
}
.header-tab-content:after {
content: "";
clear: both;
}
/* Hide input radio from users */
input[name="header-tab"] {
display: none;
}
/* Show tab when input checked */
input[name="header-tab"]:checked + .header-tab-content {
display: block;
transition: 0.5s ease-out;
}
input[name="header-tab"]::after + .header-label {
background-color: orange;
}
The HTML
<section class="header-tabs-container">
<label class="header-label" for="header-tab1">Tab1</label><!--
--><label class="header-label" for="header-tab2">Tab2</label>
</section>
<input name="header-tab" id="header-tab1" type="radio" checked/>
<section class="header-tab-content">
<h3>Test</h3>
Content
</section>
<input name="header-tab" id="header-tab2" type="radio" />
<section class="header-tab-content">
<h3> test</h3>
content
</section>
</section>
Basically everything works as expected... Except I cannot, for the life of me, get the following to work at all.
input[name="header-tab"]:checked + header-label {
background-color: orange;
}
Any ideas or advice would be greatly appreciated.
Thank you in advance.
In CSS you cannot select previous siblings, therefore you'll need move input above your tabs and use ~ for sibling selections for the content:
.header-tabs-container {
position: relative;
float: center;
/* left: 25%;*/
clear: both;
z-index: 2;
border-collapse: collapse;
white-space: normal;
border: unset;
}
/* tabs names */
.header-tabs-container .header-label {
position: relative;
padding: clamp(-1.5rem, -3.2rem + 8.8889vw, 3rem);
font-size: clamp(0.95rem, -0.925rem + 8.333vw, 3rem);
background-color: blue;
color: #fff;
cursor: pointer;
user-select: none;
text-align: center;
z-index: 1;
margin: 0px;
border: white 1px solid;
white-space: nowrap;
border-radius: 40px 40px 0px 0px;
}
/* Hover effect on tabs names */
.header-tabs-container .header-label:hover {
background: orange;
color: blue;
transition: 0.2s;
}
/* Content area for tabs */
.header-tab-content {
position: relative;
background: #eee;
margin-top: -10px;
width: 100%;
min-height: 100vh;
padding: 0px;
float: left;
box-sizing: border-box;
z-index: 2;
display: none;
white-space: nowrap;
border: 1px solid blue;
}
.header-tab-content:after {
content: "";
clear: both;
}
/* Hide input radio from users */
input[name="header-tab"] {
display: none;
}
/* Show tab when input checked */
input[name="header-tab"]:nth-of-type(1):checked ~ .header-tab-content:nth-of-type(1),
input[name="header-tab"]:nth-of-type(2):checked ~ .header-tab-content:nth-of-type(2) {
display: block;
transition: 0.5s ease-out;
}
input[name="header-tab"]:checked + .header-label {
background-color: orange;
}
<section class="header-tabs-container">
<input name="header-tab" id="header-tab1" type="radio" checked/>
<label class="header-label" for="header-tab1">Tab1</label>
<input name="header-tab" id="header-tab2" type="radio" />
<label class="header-label" for="header-tab2">Tab2</label>
<section class="header-tab-content">
<h3>Test</h3>
Content
</section>
<section class="header-tab-content">
<h3> test</h3>
content
</section>
</section>
The + combinator matches the second element only if it immediately
follows the first element.
CSS_Selectors
Move the labels and inputs inside the same section and then try ~ or +.
input must be first.
I have a slider that goes from 1 to 12. I would like the thumb to perfectly align with all the numbers above it when I move it up and down.
This is what I have so far, but as you can see, it is still slightly off.
Is there a way to achieve this?
body {
height: 100vh;
display: flex;
}
.container {
margin: auto;
width: 400px;
}
span {
display: block;
width: 1ch;
}
.numbers {
display: flex;
justify-content: space-between;
padding-left: .4em;
}
<div class="container">
<div class="numbers">
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span>
</div>
<input style="width: 100%;" type="range" min="1" max="12" name="" id="" />
</div>
We can configure the number spans so they all have the same width and center text alignment. By setting their initial width to zero we negate the effect of their contents, which vary in size (1 vs 10, for example).
We can use flexbox on the slider as well, giving it the same flex-grow value as twice our 12 numbered spans. This lets us use half-widths for spacing. We add a span on each side of it with a value of half that of the numbered spans, shifting things over properly.
Finally, some margin tweaks get things pixel-perfect (in Chrome, at least).
Note that I've changed the primary width to a relative value so you can see that this works at any size. Have a look at the full screen demo.
The primary drawback here is that we have quantities hard-coded in the CSS. If the slider range changes, so must the CSS. Ideally we'd find a fully flexible solution.
If I'm not making sense, have a look at https://css-tricks.com/snippets/css/a-guide-to-flexbox.
body {
height: 100vh;
display: flex;
}
.container {
margin: auto;
width: 75vw;
}
.numbers,
.slider {
display: flex;
justify-content: space-between;
}
.numbers span,
.slider span {
width: 0;
flex-grow: 1;
text-align: center;
}
.slider span {
flex-grow: 1;
}
.slider input {
flex-grow: 24;
margin-left: -2px; /* account for UI sizing */
margin-right: -2px; /* account for UI sizing */
}
<div class="container">
<div class="numbers">
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span>
</div>
<div class="slider">
<span><!-- half --></span>
<input type="range" min="1" max="12" name="" value="1" id="" />
<span><!-- half --></span>
</div>
</div>
I think they can't be easily arranged, according to the idea you have to play with a margin left right or width : 0%; etc ...
If you want it is an alternative
const range = document.getElementById("range"),
rangeV = document.getElementById("rangeV"),
setValue = () => {
const newValue = Number(((range.value - range.min) * 100) / (range.max - range.min)),
newPosition = 10 - newValue * 0.2;
rangeV.innerHTML = `<span>${range.value}</span>`;
rangeV.style.left = `calc(${newValue}% + (${newPosition}px))`;
};
document.addEventListener("DOMContentLoaded", setValue);
range.addEventListener("input", setValue);
body {
min-height: 100vh;
padding: 0 10vh;
margin: 0;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
input[type="range"] {
-webkit-appearance: none;
margin: 20px 0;
width: 100%;
}
input[type="range"]:focus {
outline: none;
}
input[type="range"]::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
cursor: pointer;
animate: 0.2s;
background: #03a9f4;
border-radius: 25px;
}
input[type="range"]::-webkit-slider-thumb {
height: 20px;
width: 20px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 1);
cursor: pointer;
-webkit-appearance: none;
margin-top: -8px;
}
input[type="range"]:focus::-webkit-slider-runnable-track {
background: #03a9f4;
}
.range-wrap {
width: 500px;
position: relative;
}
.range-value {
position: absolute;
top: -50%;
}
.range-value span {
width: 30px;
height: 24px;
line-height: 24px;
text-align: center;
background: #03a9f4;
color: #fff;
font-size: 12px;
display: block;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
border-radius: 6px;
}
.range-value span:before {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 10px solid #03a9f4;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
top: 100%;
left: 50%;
margin-left: -5px;
margin-top: -1px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Input Range with Dynamic Label</title>
</head>
<body>
<div class="range-wrap">
<div class="range-value" id="rangeV"></div>
<input id="range" type="range" min="1" max="12" value="1" step="1" />
</div>
</body>
</html>
I am having trouble with my HTML and CSS.
I have two containers that are directly over top of one another.
I am trying to make it so when the user hovers the top most container, it hides the top one to reveal the one behind it. This is all done through changing the viability on :hover.
However, I am finding that while it works, it often just results in rapid flickering between the two states.
I have no idea why this is happening and can't seem to figure it out. I tried changing the z-index and
position as suggested by other similar posts and couldn't get anything to work.
Code on codepen: https://codepen.io/michaelnicol/pen/jOqYbGo
HTML:
<html>
<head>
</head>
<body>
<main>
<div class="image_container">
<div class="text_div">
<h1>Mona Lisa</h1>
<p>Lorem lipsum dolor sit amat</p>
</div>
</div>
</main>
</body>
</html>
CSS:
/* Formatting Code */
main {
width: 90%;
height: 90%;
min-height: 900px;
border: 1px solid black;
background-color: #efefef;
margin: 5%;
border-radius: 20px;
box-shadow: 2px 2px 5px black;
display: flex;
justify-content: center;
align-items: center;
}
body {
display: flex;
justify-content: center;
background-color: rgb(147, 165, 207);
}
.text_div > h1, .text_div > p {
color: white;
text-shadow: 2px 2px 5px black;
}
/* image hover code */
.image_container {
height: 300px;
width: 400px;
border: 1px solid black;
background-color: rgb(156, 48, 48);
background-image: url("https://i.pinimg.com/474x/c6/90/48/c69048072a6d77dfb0a317db98ef145d.jpg")
}
.text_div {
visibility: visible;
opacity: 0.85;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100%;
width: 100%;
transition: 0.5s ease-in-out;
}
.text_div:hover {
visibility: hidden;
}
Try to replace this:
.text_div:hover {
visibility: hidden;
}
With this:
.image_container:hover .text_div {
opacity: 0;
pointer-events: none;
}
I have a message space with the response field nice and small at the bottom. When the user clicks in, it expands. However, when focused, if I then go to click my button, it looses focus - as expected, but the button isn't triggered, I have to click it again. How can I best resolve this?
.wrap {
align-items: center;
display: flex;
justify-content: flex-end;
}
textarea {
height: 40px;
width: 100%;
transition: height .2s ease;
}
textarea:focus {
height: 150px;
}
.fancy-button {
background-color: red;
cursor: pointer;
margin-left: 20px;
height: 30px;
width: 30px;
}
<div class="wrap">
<textarea></textarea>
<div class="fancy-button" onclick="alert('click');">
</div>
I think the issue is that when you click, the button is not technically in this place but only visually. If you add a wrapper that cover all the space you may be able to catch the click from the first time.
While you are having the fast transition the browser is calculating and updating the position of the button; thus your click is outside the area of the button.
You may also notice in this solution that if you click below the button the alert may not be triggered because of the same reasons. The wrapper is having its height decreasing rapidly and the click may be outside.
.wrap {
display: flex;
}
textarea {
height: 40px;
width: 100%;
transition: height .2s ease;
}
textarea:focus {
height: 150px;
}
.wrap > div {
display: flex;
align-items:center;
}
.fancy-button {
background-color: red;
cursor: pointer;
margin-left: 20px;
height: 30px;
width: 30px;
}
<div class="wrap">
<textarea></textarea>
<div onclick="alert('click');">
<div class="fancy-button" >
</div>
</div>
</div>
And if you only decrease the transition time you may also be able to catch the click the first time:
.wrap {
display: flex;
align-items: center;
}
textarea {
height: 40px;
width: 100%;
transition: height 2s ease;
}
textarea:focus {
height: 150px;
}
.fancy-button {
background-color: red;
cursor: pointer;
margin-left: 20px;
height: 30px;
width: 30px;
}
<div class="wrap">
<textarea></textarea>
<div onclick="alert('click');" class="fancy-button">
</div>
</div>
You can also keep the duration and add a delay:
.wrap {
display: flex;
align-items: center;
}
textarea {
height: 40px;
width: 100%;
transition: height .2s ease;
transition-delay:0.1s;
}
textarea:focus {
height: 150px;
transition-delay:0s;
}
.fancy-button {
background-color: red;
cursor: pointer;
margin-left: 20px;
height: 30px;
width: 30px;
}
<div class="wrap">
<textarea></textarea>
<div onclick="alert('click');" class="fancy-button">
</div>
</div>
I don't know if this for you can works, because I don't know your needs, but if you use hover instead of focus the button is free to be clicked
.wrap {
align-items: center;
display: flex;
justify-content: flex-end;
}
textarea {
height: 40px;
width: 100%;
transition: height .2s ease;
}
textarea:hover {
height: 150px;
}
.fancy-button {
background-color: red;
cursor: pointer;
margin-left: 20px;
height: 30px;
width: 30px;
}
<div class="wrap">
<textarea></textarea>
<a class="fancy-button" onclick="alert('click');"><a/>
</div>
I want:
block
block1 block2 block2
where
block ="head"
block1="h1"
block2="search box"
block3="itembox"
I want to put them in side by side..
I have tried below code in jsfiddle:
jsfiddle
but here these blocks not coming in same line.
don't use head tag use header for that
try this
#search {
display: inline-block;
}
http://jsfiddle.net/dm8044a8/2/
The element can include a title for the document, scripts, styles, meta information, and more.Head is not used inside inside BODY.
Use header instead tag.
I don't understand <itembox> tag. Are u using any framework?. I think you want some thing like this. Please change the width value as per your requirement.
header {
background: #fff;
width: 100%;
height: 76px;
position: fixed;
top: 0;
left: 0;
border-bottom: 2px solid #7e7e7e;
z-index: 100;
display:flex;
}
header h1{
color: #ff0;
background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: hue 60s infinite linear;
text-align:center;
flex-direction: column;
}
#search {
float: left;
width: auto;
height: 40px;
flex-direction: column;
}
.itembox {
float: left;
background:green;
flex-direction: column;
}
#search input {
background: none repeat scroll 0 0 #fff;
border: 0 none;
color: #7F7F7F;
float: left;
font: 12px 'Helvetica','Lucida Sans Unicode','Lucida Grande',sans-serif;
height: 20px;
margin: 0;
padding: 10px;
transition: background 0.3s ease-in-out 0s;
width: 300px;
}
#search button {
background: url("search.png") no-repeat scroll center center #7eac10;
cursor: pointer;
height: 40px;
text-indent: -99999em;
transition: background 0.3s ease-in-out 0s;
width: 40px;
border: 2px solid #fff;
}
#search button:hover {
background-color:#000;
}
<header>
<h1>news </h1>
<div id="search">
<form method="post" id="search" action="#">
<input type="text" class="search" value="Type and hit enter" onblur="if(this.value == '') { this.value = 'Type and hit enter'; }" onfocus="if(this.value == 'Type and hit enter') { this.value = ''; }" name="s">
<button type="submit" style="display:inline-block;">Submit</button>
</form>
<div class="itembox">Item box</div>
</div>
</header>