I have an Input type search and a div just below it.
I want to change the color of the div from blue to red when the search box is focused.
my Div
<div id="demo-2">
<input type="search" placeholder="Search By Title, Author" />
<div class="autocomplete">
hello
</div>
</div>
the classes I have applied
#demo-2 input[type="search"]:focus {
width: 275px;
padding-left: 32px;
color: #000;
background-color: #fff;
cursor: auto;
}
.autocomplete {
background-color: blue;
height: 350px;
width: 275px;
position: absolute;
display: block;
right: 1em;
top: 1em;
z-index: -50;
margin-right: 20px;
}
My requirement is that the background-color of class autocomplete should change from blue to red when the search is focused without using any javascript.
Tried below code but didn't work
#demo-2 input[type="search"]:focus {
width: 275px;
padding-left: 32px;
color: #000;
background-color: #fff;
cursor: auto;
.autocomplete {
background-color: red;
}
}
You can use the adjacent sibling combinator (+) or the general sibling combinator (~)
#demo-2 input[type="search"]:focus {
width: 275px;
padding-left: 32px;
color: #000;
background-color: #fff;
cursor: auto;
~ .autocomplete {
background-color: red;
}
}
Instead of div use label and make the label block for example
input{
&:focus{
& ~ label{
background-color:red;
}
}
}
label{
display:block;
background-color:blue;
color:white;
padding:.5rem;
margin-top:1rem;
}
<input type="text" id="user" autocomplete="off">
<label for="user">Username</label>
Related
I'm trying to get the behavior of <input type="search"> on regular <input type="text">.
I tried to use the appearance: searchfield; which didn't applied this special behavior.
How I want it to look:
CodePen Example (Tested on Chrome Browser, and it doesn't work)
Searching for a pure CSS/HTML solution
Demo: https://codepen.io/vsync/pen/MWjdbgL
Presented here three ways of solving the issue:
1️⃣ When the input element has no focus, its type is set to search, which then shows the x (clear button), and when the element has focus - its type is set to text
<input type="search"
onmouseup="this._timer=setTimeout(el=>{el.type='text'},0,this)"
onblur="clearTimeout(this._timer);this.type='search'"
/>
2️⃣ Wrap the input with a <form> element so it could be cleared using native <button type='clear'>
input{ padding:.5em; font:1em Arial;}
input[type='text']:placeholder-shown + button{ opacity:0; pointer-events:none;}
form{ display:inline-block; position: relative; }
form:hover input[type='text']:not(:placeholder-shown) + button{ opacity: 1 }
form button{
--size: 18px;
position: absolute;
border: none;
display: block;
width: var(--size);
height: var(--size);
line-height: var(--size);
font-size: calc(var(--size) - 3px);
border-radius: 50%;
top: 0;
bottom: 0;
right: calc(var(--size)/2);
margin: auto;
background-color: salmon;
color: white;
padding: 0;
outline: none;
cursor: pointer;
opacity: 0;
transition: .1s;
}
<form>
<input type='text' placeholder=' ' />
<button type='reset'>×</button>
</form>
3️⃣ Use a non-<form> wrapper and javascript
input{ padding:.5em; font:1em Arial; }
input[type='text']:placeholder-shown + button{ opacity:0; pointer-events:none;}
.inputWrap{ display:inline-block; position: relative; }
.inputWrap:hover input[type='text']:not(:placeholder-shown) + button{ opacity: 1 }
.inputWrap button{
--size: 18px;
position: absolute;
border: none;
display: block;
width: var(--size);
height: var(--size);
line-height: var(--size);
font-size: calc(var(--size) - 3px);
border-radius: 50%;
top: 0;
bottom: 0;
right: calc(var(--size)/2);
margin: auto;
background-color: salmon;
color: white;
padding: 0;
outline: none;
cursor: pointer;
opacity: 0;
transition: .1s;
}
<div class='inputWrap'>
<input type='text' placeholder=' ' />
<button type='reset' onclick='this.previousElementSibling.value=""'>×</button>
</div>
<html>
<head>
<style>
.border-0{
border: none;
}
.search-border{
border: 1px solid;
border-radius: 5px;
width: 200px;
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div class="search-border">
<input type="text" placeholder="Search" class="border-0">
<img src="/assets/close-icon-light.svg">
</div>
</body>
</html>
Hi,
Please try this code if this satisfies you. Use width of your choice for the search box. Also use a suitable close icon.
[![How to restrict the autocomplete div tags height without affecting the bottom fields.
Here when i'm searching for country references dropdown is showing, but the entire height is increasing.
here the dropdown is fall over the communication field. How to achieve this. Please find the PIC for better understanding Thanks.`
Country Reference
<div class="form-group right">
<label for="Communication_Type" class="label-title">Communication Type</label>
<div class="autocomplete1">
<input type="text" class="" id="empid1" name="empid1">
<div class="dialog1">
<ul id="charactersList1"></ul>
</div>
</div>
</div>
.cref_container {
background-color: yellow;
}
.label_cref {
display: inline-block;
margin-left: 25px;
padding: 5px;
width: 30%;
margin-top: 2px;
background-color: royalblue;
}
.autocomplete {
/* background: #fff; */
position: relative;
}
.autocomplete .close {
position: absolute;
font-size: 13px;
z-index: 10;
top: 10px;
left: calc(100% - 50px);
color: #aaa;
cursor: pointer;
display: none;
}
.autocomplete .close.visible {
display: block;
}
.dialog {
width: 60%;
margin-left: 40%;
display: none;
min-height: 40px;
max-height: 330px;
overflow: scroll;
border-top: 1px solid #f4f4f4;
}
.dialog.open {
display: block;
}
.dialog div {
padding: 20px 10px;
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
}
.dialog div:hover {
background: #f2f2f2;
}`]1]1
You have two options:
either use a native "select" input component which already does that (see https://www.w3schools.com/tags/tag_select.asp)
set your "dialog1"'s position to "fixed" and set its "left" and "top" from javascript. "fixed" position takes it out of the normal layout and doesn't push around any other elements.
const leftCoordinate = 20;
const topCoordinate = 100;
document.getElementsByClassName("dialog1")[0].style.left = leftCoordinate;
document.getElementsByClassName("dialog1")[0].style.top = topCoordinate;
.dialog1 {
position: fixed;
}
I want to customize the browser checkbox. When the status is checked, the icon checked.svg should be displayed instead of checkbox and the icon unchecked.svg otherwise.
Here is my code.
HTML:
<div class="checkbox-custom">
<input type="checkbox"/>
<div class="checkmark">
<img src="#/assets/images/icons/checkbox/unchecked.svg" class="unchecked"/>
<img src="#/assets/images/icons/checkbox/checked.svg" class="checked"/>
</div>
</div>
SASS:
.checkbox-custom {
position: absolute;
width: 28px;
height: 28px;
left: 0;
top: 0;
// Hide default browser checkbox
input[type=checkbox] {
display: none;
}
input[type=checkbox] + .checkmark {
position: absolute;
left: 3.5px;
top: 3.5px;
right: 3.5px;
bottom: 3.5px;
display: inline-block;
cursor: pointer;
img {
width: 21px;
height: 21px;
}
.checked {
display: none;
}
}
input[type=checkbox]:checked + .checkmark {
.checked {
display: block;
}
.unchecked {
display: none;
}
}
}
When i click on the checkbox, nothing happens. What could be the error?
This can be accomplished without any javascript. Clicking the label element toggles the checkbox inside of it, so with some clever css, we can change the display based on the input's checked state.
input[type=checkbox] {
display: none;
}
.label {
border: 1px solid #000;
display: inline-block;
padding: 3px;
/* background: url("unchecked.png") no-repeat left center; */
/* padding-left: 15px; */
}
input[type=checkbox]:checked + .label {
background: #f00;
color: #fff;
/* background-image: url("checked.png"); */
}
<label><input type="checkbox"><span class="label">Check me</span></label>
Change the .label styles to use background-image of your choice (and position it to the left of your text).
http://jsfiddle.net/pKM3x/
CSS:
.checkbox{
width: 23px;
height: 21px;
background: transparent url(http://i.stack.imgur.com/S4p2R.png ) no-repeat 0 50%
}
.checked{
background: transparent url(http://i.stack.imgur.com/S4p2R.png ) no-repeat 80% 50%
}
HTML:
<div class="checkbox">
</div>
JQUERY:
$(".checkbox").click(function(){
$(this).toggleClass('checked')
});
This also possible to do with pure JS.
I'm trying to put a span inside of a text input to prefix it with the "$" character, to represent a dollar amount.
To do this, I'm using a label element containing the "$" span along with the actual input, which is set to 100% width. The label element is styled to look like a text box.
This works fine in Chrome and IE, however in Firefox it seems that setting 100% width on the input does not take the span into consideration, and therefore extends past the actual label element's boundaries:
Code Example:
.container { width: 400px; }
.w70 { width: 70px; }
.input-with-label {
border: 1px solid #D9D9D9;
display: flex;
align-items: center;
background-color: #fff;
}
.input-with-label.-dollar-amount > input[type='text'] {
text-align: right;
font-weight: 600;
}
.input-with-label > input[type='text'] {
margin: 0;
border: none;
width: 100%;
}
.input-with-label > .input-label {
padding-left: 3px;
font-size: 10px;
border: none;
}
<div class="container">
<label class="input-with-label -dollar-amount w70">
<span class="input-label">$</span>
<input type="text" value="0.00" />
</label>
</div>
Doesn't setting min-width:0 to the input and making it use all available width via flex:1 solve the problem?
.container { width: 400px; }
.w70 { width: 70px; }
.input-with-label {
border: 1px solid #D9D9D9;
display: flex;
align-items: center;
background-color: #fff;
}
.input-with-label.-dollar-amount > input[type='text'] {
text-align: right;
font-weight: 600;
}
.input-with-label > input[type='text'] {
margin: 0;
border: none;
min-width: 0;
flex: 1;
}
.input-with-label > .input-label {
padding-left: 3px;
font-size: 10px;
border: none;
}
<div class="container">
<label class="input-with-label -dollar-amount w70">
<span class="input-label">$</span>
<input type="text" value="0.00" />
</label>
</div>
I used another method
.currencyinput span{
position: relative;
}
.currencyinput input{
padding-left:20px;
}
.currencyinput span{
left:15px;
top:0
position: absolute;
}
input{
border:1px solid lightgray;
line-height:30px;
}
<span class="currencyinput"><span>$</span><input type="text" name="amount"></span>
In css for the links I can style the as before user clicks and after user clicks. But how can I do this for simple text or an object that when a user clicks that object then change its color.
For Example
<style>
.object:onmouseclick {
background-color:green;
padding:5px;
}
</style>
What we have to write in place of onmouseclick.
If you were styling a link you would use :active or :focus but as you're using this on a dom element, you would have to use jQuery to add a class to the clicked item and apply the style through that class...
$('.object').click(function() {
$(this).toggleClass('clicked');
});
.object {
background-color: green;
padding: 5px;
cursor: pointer;
width: 300px;
color: orange;
}
.object.clicked {
background-color: blue;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="object">
<h1>The Mutants Are Revolting</h1>
<p>Bender?! You stole the atom. That's the ONLY thing about being a slave. I am Singing Wind, Chief of the Martians. Anyhoo, your net-suits will allow you to experience Fry's worm infested bowels as if you were actually wriggling through them.</p>
</div>
button:active or button:focus should do the trick.
a {
background-color: red;
}
a:active {
background-color: #efefef;
}
myButton
and optionally
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.object{
background:green;
padding:5px;
width: 300px;
height: 300px;
position: relative;
}
input{
display: none;
}
label{
display: block;
width: 300px;
height: 300px;
}
input:checked ~ label{
position: absolute; top: 0; left: 0;
width: 100%;
height: 100%;
background: #00f url(http://www.pubzi.com/f/sm-chess-horse.png) no-repeat center center;
border: 1px solid #000;
}
<div class="object">
<input type="checkbox" id="c1" name="checkbox" />
<label for="c1"></label>
</div>