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

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.

Related

why float label not working in html css form

Float label is work when the field is required. When i remove required attribute from the input tag it stop working.
div{
margin-top:40px;
}
.btn-add input[type="text"]{
width: 90%;
padding: 10px 20px 0 20px;
border: none;
border-bottom:1px solid #999;
font-size: 140%;
color: #000;
}
.btn-add input:focus ~ .floating-label,
.btn-add input:not(:focus):valid ~ .floating-label{
top: -20px;
bottom: 10px;
left: 10px;
font-size: 20px;
opacity: 1;
color: rgb(100, 6, 6);
}
.btn-add-link input[type="url"]{
width: 90%;
padding: 10px 20px 0 20px;
border: none;
border-bottom:1px solid #999;
font-size: 140%;
color: #000;
}
.btn-add-link input:focus ~ .floating-label,
.btn-add-link input:not(:placeholder-shown)~.floating-label,
.btn-add-link input:not(:focus):valid ~ .floating-label{
top: -20px;
bottom: 10px;
left: 10px;
font-size: 20px;
opacity: 1;
color: rgb(100, 6, 6);
}
.floating-label {
position: absolute;
pointer-events: none;
left: 20px;
top:10px;
transition: 0.2s ease all;
color: #999999;
font-size: 120%;
}
.form-float{
position: relative;
}
<div class="form-float btn-add">
<input type="text" class="inputText" >
<label class="floating-label">Button text</label> </div>
I don't want this field as required field how can i fix it. how can i do that float label work without making input required
The selector input:focus selects the input when it get focus and the selector input:not(:focus):valid selects it if it is valid input but not focused. Since you don't want the input field to be necessarily to be filled, you have to remove:
input:not(:focus):valid~.floating-label

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

Input boxes don't have a "hitbox" and appear in front of the text

I'm having issues creating my auto-completing/auto-suggesting input box.
This is how it's currently working: https://i.imgur.com/2RzI3il.gifv
And here's a code snippet, bare in mind, the react code isn't included. The functionality isn't important, just the CSS layout.
.App {
text-align: center;
font-family: "Ubuntu", sans-serif;
}
#main{
position: absolute;
top: 0;
left: 0;
z-index: 1;
background: transparent;
}
#autocomplete{
position: absolute;
top: 0;
left: 0;
background: transparent;
z-index: 0;
}
.LocationInput {
position: relative;
margin: 30px;
font-size: 1.1em;
font-family: "proxima-nova", Arial;
}
.LocationInput-Input {
padding: 5px 5px;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid #002857;
-webkit-transition: 0.5s;
}
.LocationInput-Input:focus {
outline: none;
}
.LocationInput-Input-Valid {
padding: 5px 5px;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid rgb(107, 175, 19);
-webkit-transition: 0.5s;
}
.LocationInput-Input-Valid:focus {
outline: none;
}
<div class="App" class="LocationInput LocationInput-from">
<div>
from:
<input type="text" id="main"
class="LocationInput-Input-Valid"
value="Thórshavn">
</div>
<div>
<input type="text" id="autocomplete"
class="LocationInput-Input"
value="Thórshavn" disabled="">
</div>
</div>
I want it to be displayed like this: https://i.imgur.com/qFFn5Gu.png
However, it is being displayed like this: https://i.imgur.com/irU05Yh.png
When I use Chrome's inspect tool, I find that the elements have these weird "hitboxes": https://i.imgur.com/b923Dzp.gifv
though that might not be relevant? I've tried to fix this and I just suck at CSS too much :p
There are multiple ways to work this out, here is one of them:
.App {
text-align: center;
font-family: "Ubuntu", sans-serif;
}
.input-contianer {
position: relative;
text-align: left;
}
label {
display: inline-block;
margin-top: 5px;
}
#main{
position: absolute;
top: 0;
left: 60px;
z-index: 1;
background: transparent;
}
#autocomplete{
position: absolute;
top: 0;
left: 60px;
background: transparent;
z-index: 0;
}
.LocationInput {
position: relative;
margin: 30px;
font-size: 1.1em;
font-family: "proxima-nova", Arial;
}
.LocationInput-Input {
padding: 5px 5px;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid #002857;
-webkit-transition: 0.5s;
}
.LocationInput-Input:focus {
outline: none;
}
.LocationInput-Input-Valid {
padding: 5px 5px;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid rgb(107, 175, 19);
-webkit-transition: 0.5s;
}
.LocationInput-Input-Valid:focus {
outline: none;
}
<div class="App" class="LocationInput LocationInput-from">
<div class="input-contianer">
<label>
from:
</label>
<input type="text" id="main"
class="LocationInput-Input-Valid"
value="Thórshavn">
<input type="text" id="autocomplete"
class="LocationInput-Input"
value="Thórshavn" disabled="">
</div>
</div>
I kept the two inputs absolute positioned, but wrapped them in a .input-container div that has a relative position (so the absolute will be absolute to the relative container).
I added a <label> element that will wrap the from:, this way you can position that label.
You should set a wrapping div with a relative position and play with the left position of the inputs
.App {
text-align: center;
font-family: "Ubuntu", sans-serif;
}
.container{
position:relative;
}
.label{
position: absolute;
padding: 5px;
}
#main {
position: absolute;
top: 0;
left: 50px;
z-index: 1;
background: transparent;
}
#autocomplete {
position: absolute;
top: 0;
left: 50px;
background: transparent;
z-index: 0;
}
.LocationInput {
position: relative;
margin: 30px;
font-size: 1.1em;
font-family: "proxima-nova", Arial;
}
.LocationInput-Input {
padding: 5px 5px;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid #002857;
-webkit-transition: 0.5s;
}
.LocationInput-Input:focus {
outline: none;
}
.LocationInput-Input-Valid {
padding: 5px 5px;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid rgb(107, 175, 19);
-webkit-transition: 0.5s;
}
.LocationInput-Input-Valid:focus {
outline: none;
}
<div class="App" class="LocationInput LocationInput-from">
<div class="container">
<div class="label">from:</div>
<input type="text" id="main" class="LocationInput-Input-Valid" value="Thórshavn">
<input type="text" id="autocomplete" class="LocationInput-Input" value="Thórshavn" disabled="">
</div>
</div>

Keep tooltip within parent container?

I cannot figure out a way to keep the tooltip inside the "main-content" container. Here's the code:
.main-content {
background: #151418;
width: 500px;
min-height: 200px;
}
[data-tooltip] {
display: inline;
position: relative;
cursor: pointer;
}
[data-tooltip]:hover:after {
background: rgba(0, 0, 0, .9);
border-left: 5px solid #000;
border-right: 5px solid #000;
border-radius: 5px;
position: absolute;
bottom: 16px;
left: 0;
content: attr(data-tooltip);
font-family: Consolas, "courier new";
font-size: 12px;
color: #657b99;
padding: 5px 10px;
z-index: 98;
white-space: nowrap;
}
p {
color: white;
margin-left: 50px;
}
<div class="main-content">
<br>
<br>
<p>Hover mouse <span data-tooltip="Here goes a long text that does not stay inside main-content container">HERE</span></p>
</div>
Is there any way to push it back inside?
Or add an max-width to the tooltip somehow? I tried to add max-width, but it didn't work because of [data-tooltip]'s display:inline;.
(I know that replacing "inline" with "block" would solve the problem with max-width, but I can't do that because I need to keep the text inline...)
Don't know how to make it word responsive, don't know if is even possible with only css - tooltips are for short mesages.
But it's a start
.main-content {
background: #151418;
width: 500px;
min-height: 200px;
}
[data-tooltip] {
display: inline;
position: relative;
cursor: pointer;
}
[data-tooltip]:hover:after {
background: rgba(0, 0, 0, .9);
border-left: 5px solid #000;
border-right: 5px solid #000;
border-radius: 5px;
position: absolute;
bottom: 16px;
left: 0;
content: attr(data-tooltip);
font-family: Consolas, "courier new";
font-size: 12px;
color: #657b99;
padding: 5px 10px;
z-index: 98;
/* width: 250px; */
min-width: 200px;
/* max-width: 400px; */
height: 50px;
overflow: auto;
}
p {
color: white;
margin-left: 50px;
}
<div class="main-content">
<br>
<br>
<p>Hover mouse <span data-tooltip="Here goes a long text that does not stay inside main-content container">HERE</span></p>
</div>

How to assign a tooltip to a div without javascript or JQuery?

I am trying to design a form where I have tool tips that are ALWAYS showing on the right side to help the users in filling out their forms. What I did was I assigned each parts in Divs and I want a tool tip for each one.
<div title="This is where you fill your first name in.">
<p> First Name: <input type="text" name="firstName"/> </p>
</div>
<div title="Last Name Entry">
<p> Last Name: <input type="text" name="lastName"/> </p>
</div>
<div title="OK!">
<input type="submit" style="width: 10em; margin: auto 0"/>
</div>
I found this neat website that helps you style in CSS with ease and I used a code that I generated through it:
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
width:140px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.tooltips span:after {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -8px;
width: 0; height: 0;
border-right: 8px solid #000000;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.8;
left: 100%;
top: 50%;
margin-top: -15px;
margin-left: 15px;
z-index: 999;
}
courtesy of:
http://html-generator.weebly.com/
Thanks in advance!
Well, I can give you answer for you question from title.
I always use CSS3 pseudo elements and data atribute to accomplished that without any jQuery code.
This is CSS3:
[data-tip] {
position:relative
}
[data-tip]:before {
content: '';
display: none;
border: 5px solid #000;
border-top-color: #000;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
position: absolute;
top: -7px;
left: 10px;
z-index: 8;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
}
[data-tip]:after {
display: none;
content: attr(data-tip);
position: absolute;
top: -35px;
left: 0px;
padding: 0px 8px;
background: #000;
color: #fff;
z-index: 9;
font-size: 13px;
height: 28px;
line-height: 28px;
white-space: nowrap;
word-wrap: normal;
}
[data-tip]:hover:before, [data-tip]:hover:after {
display: block;
}
.tip-below[data-tip]:after {
top: 23px;
left: 0px;
}
.tip-below[data-tip]:before {
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: #1a1a1a;
border-left-color: transparent;
top: 13px;
left: 10px;
}
And HTML would b:
some text here
Instead of bellow you can make to right side.
Here's a FIDDLE
In the fiddle tooltip works on focus but if you remove opacity it'll be always shown
<input type="text" name="firstName" placeholder="First Name"><span class="tooltip">Tooltip 1 content</span>
<input type="text" name="lastName" placeholder="Last Name"><span class="tooltip">Tooltip 2 content</span>
input {
float: left;
clear: left;
width: 200px;
margin: 0 0 12px;
padding: 5px;
border: 1px solid #ddd;
}
.tooltip {
position: relative;
float: left;
margin-left: 10px;
padding: 0 5px;
line-height: 26px;
color: #555;
opacity: 0;
border: 1px solid #ccc;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-webkit-transition: opacity 0.3s ease-in-out;
}
.tooltip:after, .tooltip:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.tooltip:after {
border-color: rgba(200,200,200,0);
border-right-color: #ddd;
border-width: 8px;
margin-top: -8px;
}
input:focus + .tooltip {
opacity: 1;
}

Categories