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
Related
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.
I want to create a button with a hidden input that activates once the button was pressed.
I made demo but in this demo input animated via changing width and padding which is not good.
So is there any better way to animate this button?
HTML:
<div class="button-wrap">
<label>Max score</label>
<input>
</div>
CSS:
.button-wrap {
display: flex;
height: var(--height);
outline: none;
--height: 20px;
--padding: 5px;
--background: #454555;
--background-active: #46467c;
--background-hover: #46467c;
--separator: #565666;
--radius: 5px;
--input-width: 30px;
--text-color: #eee;
}
input, label {
height: auto;
transition: .3s;
outline: 0;
color: var(--text-color);
text-align: center;
}
label {
display: inline;
width: 100%;
padding: var(--padding);
border-radius: var(--radius);
background-color: var(--background);
border-color: var(--separator);
transition: border-radius .5s;
user-select: none;
text-align: center;
}
input {
padding: var(--padding) 0;
border: none;
width: 0;
background-color: var(--background);
border-radius: 0 var(--radius) var(--radius) 0;
}
.button-wrap:hover label,
.button-wrap:hover input {
background-color: var(--background-hover);
}
.button-wrap[active] label {
border-radius: var(--radius) 0 0 var(--radius);
background-color: var(--background-active);
border-color: var(--separator);
border-right: 2px solid var(--separator);
transition: border-radius .3s;
}
.button-wrap[active] input {
width: calc(var(--input-width) - 2 * var(--padding));
background-color: var(--background-active);
padding: var(--padding);
}
Attribute 'active' is added by js after the button was pressed.
And there is the demo:
function myFunction(e) {
e.toggleAttribute("active").toggle;
}
.button-wrap {
display: flex;
outline: none;
--height: 20px;
--padding: 5px;
--background: #47478d;
--background-active: #46464f;
--background-hover: #46467c;
--separator: #565666;
--radius: 5px;
--input-width: 40px;
--text-color: #eee;
width: 250px;
height: 40px;
background:#34344d;
padding:15px;
}
input, label {
height: auto;
outline: 0;
color: var(--text-color);
text-align: center;
}
label {
display: flex;
width: 100%;
padding: var(--padding);
border-radius: var(--radius);
background-color: var(--background);
border-color: var(--separator);
transition: border-radius .5s;
user-select: none;
text-align: center;
align-items:center;
justify-content:center;
}
input {
padding: var(--padding);
border: none;
width: calc(var(--input-width) - 2 * var(--padding));
background-color: var(--background);
border-radius: 0 var(--radius) var(--radius) 0;
overflow: hidden;
display: none;
opacity: 0;
transition: display 0ms 400ms, opacity 400ms 0ms;
}
.button-wrap:hover label,
.button-wrap:hover input {
background-color: var(--background-hover);
}
.button-wrap[active] label {
border-radius: var(--radius) 0 0 var(--radius);
background-color: var(--background-active);
border-color: var(--separator);
border-right: 2px solid var(--separator);
transition: border-radius .3s;
}
.button-wrap[active] input {
background-color: var(--background-active);
padding: var(--padding);
color:#fff;
opacity: 1;
display:block;
transition: display 0ms 0ms, opacity 600ms 0ms;
}
<div class="button-wrap" onclick="myFunction(this)">
<label>Max score</label>
<input type="text" value="100">
</div>
So there's the answer that my teacher came up with.
HTML
<div class='button-wrap'>
<label>Max count</label>
<input>
</div>
CSS
.button-wrap {
width: 200px;
contain: content;
overflow: hidden;
border-radius: 5px;
position: relative;
outline: none;
height: 30px;
line-height: 20px;
background: #454555;
--input-width: 32px;
}
.button-wrap[active] {
background-color: #46467c;
}
.button-wrap:hover {
background-color: #46467c;
}
input, label {
height: 100%;
display: block;
box-sizing: border-box;
transition: transform .3s;
appearance: none;
outline: 0;
color: #eee;
border: none;
text-align: center;
background: transparent;
padding: 5px;
}
label {
width: 100%;
user-select: none;
}
input {
position: absolute;
top: 0;
right: 0;
border-left: 2px solid #565666;
width: var(--input-width);
transform: translateX(var(--input-width));
}
.button-wrap[active] label {
transform: translateX(calc(-1 * var(--input-width) / 2));
}
.button-wrap[active] input {
transform: translateX(0);
}
Here's the demo
I have been trying to build a search engine using basic HTML and CSS for my Uni but IE just doesnt seem to like text boxes. Works perfectly fine in Chrome and Edge but for some reason doesnt work well in IE.
Screenshots attached below.
Image in IE
Image in Chrome
Any help would be highly appreciated.
Code for the search box and the search text button:
.search-box {
position: absolute;
top: 260px;
left: 46%;
transform: translate(-50%, -50%);
background: #2f3640;
height: 60px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover > .search-text {
width: 350px;
padding: 0 6px;
}
.search-box:hover > .search-btn {
background: white;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
transition: 1s;
}
.search-text {
font-family: VFRegular;
border: 1px red solid;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
line-height: 40px;
width: 0px;
}
/*
.search-box:hover ~ .category-box {
width: 400px;
opacity: 1;
visibility: visible;
}
.category-box:hover {
width: 400px;
opacity: 1;
visibility: visible;
}
.category-box {
position: absolute;
align-items: center;
top: 38%;
left: 50%;
text-decoration-color: white;
transform: translate(-50%, -50%);
background: #2f3640;
height: 60px;
border-radius: 40px;
padding: 10px;
width: 0px;
color: white;
visibility: collapse;
opacity: 0;
transition: width 1s, height 1s, transform 1s;
transition: opacity 1s;
}
*/
.search-box > ul {
left: -100px;
background-color: #2f3640;
color: white;
border-radius: 10px;
list-style-type: none;
font-size: 15px;
}
.search-box > ul li {
left: -10px;
margin: 0 0 10px 0;
border-bottom: 1px solid white;
z-index: 1;
}
.search-box > ul li:last-child {
margin: 0 0 10px 0;
border-bottom: 1px solid transparent;
}
.search-box > ul li:hover {
color: red;
}
<div class="entire-searchbox">
<div class="search-box">
<input class="search-text" type="text" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
<ul id="testListDummy">
</ul>
</div>
</div>
Can you set 400px in .search-box class should be work
Try to add the height property for the .search-text, code as below:
.search-text {
font-family: VFRegular;
border: 1px red solid;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
line-height: 40px;
width: 0px;
height:58px;
}
The output as below:
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>
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;
}