We Keep Coding

how to make the style of select option like this style?

hello i have this photo :
enter image description here
i want to make a select option with the same style
<div class="name">
<input class="input1"type="name" required>
<label class="label1">First name</label>
</div>
.label1{
position: relative;
color: #555;
font-size: 15px;
pointer-events: none;
right: 15px;
top: -28px;
transition: .2s all;
}
.input1:focus ~.label1,
.input1:valid ~ .label1{
top: -49px;
right: 9px;
background: #fff;
padding: 0 5px;
font-size: 10px;
color: #1f52f9;
}
.input1{
outline: none;
border: 1px solid #9c9c9c;
border-radius: 5px;
padding: 0 10px;
height: 35px;
font-size: 15px;
}
.input1:focus{
border: 1.5px solid #1f52f9;
}
.input1[type="name"]{
display: block;
margin: 30px 0 0 10px;
}
.input1[type="username"]{
display: block;
width: 390px;
margin: 10px 0 0 10px;
}
.input1[type="submit"]{
background: #4971f6;
color: #fff;
border: none;
padding:10px 30px;
border-radius: 5px;
margin: 40px 0 30px 180px;
cursor: pointer;
font-size: 15px;
}
.input1[type="submit"]:hover{
background: #254fdb;
}
so i want to make with the same style which mean when i press inside the select (the placeholder moving to the border and then opens the options)

I made some changes to class name only to make this answer general.
Here selection for label is done by + selector,.field .input:focus+.label .field .input:active+.label. focus and active are two states for input. For more information about visit plus selector.
We set field to positon:relative and made label positon:absolute. By seeting other cs for backgroubd-color and top, right we can achieve it easily.
.field {
position: relative;
display: inline-block;
margin: 10px 0;
}
.field .input {
line-height: 20px;
background: transparent;
position: relative;
text-align: right;
border-radius: 4px;
}
.field .input:focus,
.input:active {
border-color: blue;
outline: blue;
line-height: 28px;
}
.field .label {
position: absolute;
right: 2px;
z-index: -1;
}
.field .input:focus+.label,
.field .input:active+.label {
z-index: 1;
background-color: white;
color: blue;
top: -8px;
padding: 0 4px;
}
<div class="field">
<input class="input" type="name" required>
<label class="label">First name</label>
</div>

Firstly, there are a ton of libraries which you can choose from, that provide such ready-to-use components/elements. Secondly, if you need to open a dropdown, then you should have a look at <select> tag in html, in which you can provide multiple <option> tags, which a user can choose from.

Why the same button animation cannot use inside form?

I tried to add an animation for my form submit button on my Todo list.
Unfortunately, the same button animation works outside form, but inside form only can hover the text. I have no idea where the problem is?
import React from "react";
class TodoForm extends React.Component {
render() {
return (
<div>
<div className={"container"}>
<form action="">
<h1>Todo List</h1>
<input type="text" placeholder={""}/>
<button className="custom-btn btn">Submit</button>
</form>
<button className="custom-btn btn">Submit</button>
</div>
</div>
);
}
}
export default TodoForm;
.container {
display: flex;
flex-direction: row;
/*align-items: center;*/
justify-content: center;
margin-top: 5%;
}
form {
height: 500px;
width: 400px;
background-color: #f4f7fc;
border: 2px solid;
border-radius: 10px;
box-shadow:8px 8px 5px;
text-align: center;
}
h1 {
font-family: 'Orbitron', sans-serif;
font-weight: 900;
}
input[type='text'] {
border: 1px solid #ddd;
height: 6%;
min-width: 60%;
transition: all ease-in 0.25s;
}
.custom-btn {
margin-left: 5px;
width: 25%;
height: 37px;
border-radius: 5px;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
outline: none;
}
.custom-btn, input[type='text'] {
box-shadow: 1px 1px 1px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);
}
.btn {
border: 2px solid #f4f7fc;
color: #f59cb1;
font-family: 'Orbitron', sans-serif;
font-weight: 900;
}
.btn:after {
position: absolute;
content: "";
width: 0;
height: 100%;
top: 0;
left: 0;
direction: rtl;
z-index: -1;
box-shadow:
-7px -7px 20px 0px #fff9,
-4px -4px 5px 0px #fff9,
7px 7px 20px 0px #0002,
4px 4px 5px 0px #0001;
transition: all 0.3s ease;
}
.btn:hover {
color: #FF6F91;
}
.btn:hover:after {
left: auto;
right: 0;
width: 100%;
}
.btn:active {
top: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

The background color doesn't let you see the animation, just comment it;
form {
height: 500px;
width: 400px;
/*background-color: #f4f7fc;*/
border: 2px solid;
border-radius: 10px;
box-shadow:8px 8px 5px;
text-align: center;
}

Is it possible to display respective country flag to out side of the select function. Or Can we display country flag on the both place

function onChangeCallback(ctr) {
console.log("The country was changed: " + ctr);
//$("#selectionSpan").text(ctr);
}
$(document).ready(function() {
$(".niceCountryInputSelector").each(function(i, e) {
new NiceCountryInput(e).init();
});
});
.container {
margin: 80px auto !important;
padding: 15px;
}
.bg-box1 {
background-color: #E8E8E8;
padding: 30px;
/* width: 460px;*/
width: 700px;
box-shadow: 3px 3px 5px #808080;
border-radius: 6px;
}
.bg-box {
box-shadow: 1px 1px 3px #484848;
border-radius: 6px;
}
select {
border-radius: 6px;
}
.search {
src: url(img/search.png);
}
.niceCountryInputMenu {
background: white !important;
color: black !important;
border: 1px solid #a8a8a8;
cursor: pointer;
border-radius: 4px;
box-shadow: 1px 1px 3px #808080
/*
font-family: Arial;
font-size: 12px;
*/
}
.niceCountryInputMenuDefaultText {
width: 270px;
padding: 6px;
margin: 6px 0px 0px 15px;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1.1rem;
}
.niceCountryInputMenuDefaultText a:hover {
text-decoration: none;
}
.niceCountryInputMenu a {
color: #787878 !important;
}
.niceCountryInputMenuDropdown {
/*border-left: 1px solid #a8a8a8;*/
height: 30px;
width: 25px;
float: right;
line-height: 30px;
padding: 8px;
text-align: center;
position: relative;
right: 0;
color: #484848;
}
.niceCountryInputMenuDropdownContent {
border: 1px solid #a8a8a8;
background-color: #fff;
font-size: 1.1rem;
border-top: 0;
max-height: 200px;
overflow-y: scroll;
overflow-x: hidden;
}
.niceCountryInputMenuDropdownContent a {
height: 40px;
line-height: 40px;
display: block;
width: 100%;
color: #787878 !important;
overflow: hidden;
text-decoration: none;
border: 1px solid #F5F5F5;
/*
font-family: Arial;
font-size: 12px;
*/
}
.niceCountryInputMenuDropdownContent a:hover {
background-color: #63a2d7 !important;
color: white !important;
text-decoration: none;
}
.niceCountryInputMenuFilter {
border: 1px solid #a8a8a8;
border-top: -10;
border-bottom: 0;
}
.niceCountryInputMenuFilter input {
width: 100%;
width: calc(100% - 10px);
margin: 5px;
padding: 10px;
border: 1px solid #ccc;
outline: none;
border-radius: 6px;
font-size: 1.1rem;
color: #808080;
}
.niceCountryInputMenuCountryFlag {
border: 1px solid #d3d3d3;
width: 23px;
height: 18px;
margin-left: 5px;
margin-right: 5px;
}
.niceCountryInputMenuCountryNoFlag {
display: inline-block;
border: 1px solid black;
background: white;
color: black;
line-height: 15px;
text-align: center;
width: 22px;
margin-left: 5px;
margin-right: 5px;
font-size: 13px;
}
<script src="https://manishasecurity.in/creative-js/niceCountryInput.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h3>Select a Country:</h3>
<div class="bg-box1">
<div class="row">
<div class="col-4">
<div style="background-color: #fff; width: 160px; height: 50px;margin-top: 0px; padding: 4px; border-radius: 6px;font-size: 12px;" data-showflags="true" class=""></div>
</div>
<div class="col-8">
<div class="niceCountryInputSelector bg-box" style="width: 400px;" data-selectedcountry="ad" data-showspecial="false" data-showflags="true" data-i18nall="All selected" data-i18nnofilter="No selection" data-i18nfilter="Search Country..." data-onchangecallback="onChangeCallback" />
</div>
</div>
</div>
</div>
Hi,
I have made the country flag dropdown list.
In the dropdown list, whether it is scroll by mouse or search country name in the search box, the country will be autocompleted and it will be displayed in the input field with the country name and flag.
The dropdown function working properly.
Requirement:-
Without removing its Name and flag from the dropdown section, Can we display Country Flag outside of the dropdown section?. I am trying for that but I am not able to do that.
I hope someone can understand and help me out in this situation.
Thanks Lots

I modified the function onChangeCallback to place the flag to the other div.
function onChangeCallback(ctr) {
let flag=$(".niceCountryInputSelector").find("[data-flagiso='"+ctr+"']")[0];
flag=$(flag).clone();
$(".col-4").children("div:first-child").empty();
$(".col-4").children("div:first-child").append(flag);
}
So, you can append the flagObjElement to where you want to append.

How can I toggle the border property of an element on click, without it displacing other elements?

I'm trying to build a page where people can select the colour and capacity of a product. Only one colour/capacity can be active at a given time and when one has been selected a border needs to appear around it.
You can see in my attempt below the problem of the other elements being displaced when the border is applied.
I thought about giving all the elements border: 2px solid rgba(0,0,0,0) to resolve the displacing issue then using javascript to change the border properties on click, but I think this is probably not an elegant solution.
Here is the HTML...
<ul>
<li onclick="changeName('Gold')"><div class="select-colour" id="gold"></div></li>
<li onclick="changeName('Silver')"><div class="select-colour" id="silver"></div></li>
<li onclick="changeName('Space Grey'); "><div class="select-colour" id="space-grey"></div></li>
</ul>
and the CSS...
ul li {
width: 47px;
height: 47px;
border-radius: 12px;
border: 2px solid rgba(0,0,0,0);
padding: 3px;
}
.select-colour {
width: 45px;
height: 45px;
border-radius: 8px;
border: 1px solid #c2bebb;
-webkit-box-shadow: inset 0px -99px 46px -86px rgba(0,0,0,0.42);
-moz-box-shadow: inset 0px -99px 46px -86px rgba(0,0,0,0.42);
box-shadow: inset 0px -99px 46px -86px rgba(0,0,0,0.42);
}
#gold {
background-color: #f5e7dc;
}
#silver {
background-color: #e2e2e2;
}
#space-grey {
background-color: #232323;
}
Does anyone have any ideas about the best way to approach this? Thanks.

Add box-sizing: border-box to the ul li selector like this:
ul li {
width: 47px;
height: 47px;
border-radius: 12px;
border: 2px solid rgba(0,0,0,0);
padding: 3px;
box-sizing: border-box;
}
Box sizing: border-box makes the element total width/height include the border and radius.
Edit:
Two links for documentation:
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Here's a CSS only solution using radio buttons and labels. Hope this helps.
* {
box-sizing: border-box;
}
.container {
position: relative;
padding-top: 30px;
}
label {
color: transparent;
position: absolute;
top: 0;
left: 0;
}
input:checked+label {
color: black;
}
input[type="radio"] {
display: none;
}
#gold+label:after {
content: "";
width: 2rem;
height: 2rem;
background: gold;
position: absolute;
border-radius: 5px;
top: 30px;
left: 0;
}
#gold:checked+label:after, #silver:checked+label:after, #bronze:checked+label:after {
border: 2px solid red;
}
#silver+label:after {
content: "";
width: 2rem;
height: 2rem;
background: silver;
position: absolute;
border-radius: 5px;
top: 30px;
left: 40px;
}
#bronze+label:after {
content: "";
width: 2rem;
height: 2rem;
background: sandybrown;
position: absolute;
border-radius: 5px;
top: 30px;
left: 80px;
}
<div class="container colors">
<form name="colors">
<input type="radio" id="gold" name="color" />
<label for="gold">Gold</label>
<input type="radio" id="silver" name="color" />
<label for="silver">Silver</label>
<input type="radio" id="bronze" name="color" />
<label for="bronze">Bronze</label>
</form>
</div>

use
box-sizing: border-box;
Here is the link to MDN where you can find more details
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Simply keep the border-color: transparent if the div is not selected, and change the color of the border on selection. By the way, you may add a transition to it as well.

<style>
input[type="checkbox"]:checked ~ #hello{
box-shadow: 0 0 0 3px hotpink;
}
#hello{
width: 50px;
margin: 20px;
}
</style>
<input id="check" type="checkbox">
<label id="hello" for="check">Hello</label>
This is what you want a hidden check box

Focusout when click on outside of div container

I have a small piece of code and i wanted to know that how can I do when I click on outside div class="gutte" and this div should be go focusout. I snippet my code down and this is not focusout when I click on outside of div class="gutte" (or <body> ) and i cannot use input type[text]. When I click on btn1 div class="gutte" focus but one I click on another part (in input type text) it goes focusout.. How could I do this ? I am using jQuery framework.
var tt = $.noConflict();
tt(document).ready(function($) {
$(".qta").focus(function() {
$(".gutt").css({
'display': 'inline-block'
});
$(".gutte").addClass('grandisciti');
});
$(".gutte").focusout(function() {
$(".gutt").css({
'display': 'none'
});
$(".gutte").removeClass('grandisciti');
});
});
body {
width: 100%;
height: 100%;
background-color: #c1c2c3;
}
.gutte {
box-sizing: border-box;
position: relative;
display: block;
width: 550px;
height: 50px;
background-color: #fff;
color: #000;
margin: 0px;
padding: 0px;
margin-left: 32%;
margin-top: 30px;
padding-top: 2.5px;
padding-left: 1px;
padding-bottom: 2px;
border-radius: 10px;
border-radius: 10px;
text-align: center;
}
.ati {
box-sizing: border-box;
position: static;
display: inline-block;
width: 105px;
height: 45px;
margin: 0px;
padding: 0px;
padding: 0px 10px;
border: none;
background-color: #ccc;
/*border:2px solid #ccc;*/
border-radius: 10px;
outline: none;
cursor: pointer;
transition: 0.8s all;
font-size: 120%;
color: #000;
}
.grandisciti {
width: 600;
height: 300px;
-webkit-box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5);
}
.gutt {
display: none;
width: 530px;
margin:10px;
background-color: #000;
}
.tref {
display: inline-block;
width: 80%;
height: 100px;
resize: none;
outline: none;
padding: 10px;
margin: 15px;
border: 5px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
body
<div tabindex="1" class="gutte">
<div class="irj fjr_p05gure rddre ">
<button class="ati qta ">btn1</button>
<button class="ati ">btn2</button>
<button class="ati ">bt3</button>
</div>
<span class="gutt">
<input type="text" class="tref"/>
</span>
</div>

When you focus in a element, any element that has focused make focusout, then target element make focused. See this example for better understanding.
$("input").focus(function(){
console.log(this.name + " focused");
}).blur(function(){
console.log(this.name + " blured");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="A" />
<input name="B" />
<input name="C" />
You need to add focus event to any button like this:
Answer:
Jsfiddle