I am trying to make a search bar using an input and to add to it a svg.
this is how it should look like
this is my code
.search-input-btn {
background: transparent;
border: none;
cursor: pointer;
display: inline-block;
font-size: 20px;
position: absolute;
top: 0;
right: 0;
padding: 18px 20px;
z-index: 2;
}
<div class="col-4">
<input type="text" class="form-control" placeholder="Search">
<button type="submit" class="search-input-btn"><img src="assets/images/search-input-btn.svg"></button>
</div>
and this is how it looks like so far
You can use transform property to align it vertically.
.search-input-btn {
background: transparent;
border: none;
cursor: pointer;
display: inline-block;
font-size: 20px;
position: absolute;
top: 0;
right: 0;
padding: 18px 20px;
z-index: 2;
transform:translateY(-50%);
}
Related
I am trying to style a select drop down box. The custom select box has rounded corners and a dropdown list (a box that drops down with the options) that shows on focus. I used the css below to style the select box. I have also substituted the html select with DIV elements.
Here is the code I have used so far:
document.querySelector('.custom-select-wrapper').addEventListener('click', function() {
this.querySelector('.custom-select').classList.toggle('open');
for (const option of document.querySelectorAll(".custom-option")) {
option.addEventListener('click', function() {
if (!this.classList.contains('selected')) {
this.parentNode.querySelector('.custom-option.selected').classList.remove('selected');
this.classList.add('selected');
this.closest('.custom-select').querySelector('.custom-select__trigger span').textContent = this.textContent;
}
})
}
})
.custom-select-wrapper {
position: relative;
user-select: none;
width: 188px;
z-index: 30000000000;
}
.custom-select {
position: relative;
display: flex;
flex-direction: column;
}
.custom-select__trigger {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
height: 27px;
background: #ffffff;
cursor: pointer;
border: 1px solid #707070;
border-radius: 8px;
}
.custom-options {
position: absolute;
display: block;
top: 100%;
left: 0;
right: 0;
border: 1px solid #707070;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
background: #fff;
transition: all 0.5s;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 2;
}
.custom-select.open .custom-options {
opacity: 1;
visibility: visible;
pointer-events: all;
}
.custom-option {
position: relative;
display: block;
padding: 0 10px 0 10px;
line-height: 25px;
cursor: pointer;
transition: all 0.5s;
}
.arrow {
position: relative;
top: 15px;
right: 15px;
}
.arrow::before,
.arrow::after {
content: "\f0d7";
font-family: "Font Awesome 5 Free";
font-size: 20px;
font-weight: 700;
color: #394a6d;
position: absolute;
bottom: 0px;
}
<div class="custom-select-wrapper">
<div class="custom-select">
<div class="custom-select__trigger">
<span>Option 1</span>
<div class="arrow"></div>
</div>
<div class="custom-options">
<span class="custom-option selected" data-value="tesla">Option 2</span>
<span class="custom-option" data-value="volvo">Option 3</span>
</div>
</div>
</div>
The styles I have applied to the select tag are coming into effect, but the problem is that the dropdown box top border does not blend with the select box itself on focus. Is it only possible to change the SELECT input style on focus from a round border to a square border?
Would someone with some more knowledge in this regard please take a few minutes to suggest a solution?
It depends on what you mean by "blending", but if you want to achieve a more harmonious look, you can do the following:
Set the border-bottom-left-radius and border-bottom-right-radius of the trigger element to 0px when the dropdown is open, so that the select trigger visually continues to the dropdown that is visible
Remove the top border of the dropdown, so that you don't have a doubly-thick border separating the trigger and the dropdown
See proof-of-concept below:
document.querySelector('.custom-select-wrapper').addEventListener('click', function() {
this.querySelector('.custom-select').classList.toggle('open');
for (const option of document.querySelectorAll(".custom-option")) {
option.addEventListener('click', function() {
if (!this.classList.contains('selected')) {
this.parentNode.querySelector('.custom-option.selected').classList.remove('selected');
this.classList.add('selected');
this.closest('.custom-select').querySelector('.custom-select__trigger span').textContent = this.textContent;
}
})
}
})
.custom-select-wrapper {
position: relative;
user-select: none;
width: 188px;
z-index: 30000000000;
}
.custom-select {
position: relative;
display: flex;
flex-direction: column;
}
.custom-select__trigger {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
height: 27px;
background: #ffffff;
cursor: pointer;
border: 1px solid #707070;
border-radius: 8px;
transition: all 0.5s;
}
.custom-options {
position: absolute;
display: block;
top: 100%;
left: 0;
right: 0;
border: 1px solid #707070;
border-top: none;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
background: #fff;
transition: all 0.5s;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 2;
}
.custom-select.open .custom-select__trigger {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.custom-select.open .custom-options {
opacity: 1;
visibility: visible;
pointer-events: all;
}
.custom-option {
position: relative;
display: block;
padding: 0 10px 0 10px;
line-height: 25px;
cursor: pointer;
transition: all 0.5s;
}
.arrow {
position: relative;
top: 15px;
right: 15px;
}
.arrow::before,
.arrow::after {
content: "\f0d7";
font-family: "Font Awesome 5 Free";
font-size: 20px;
font-weight: 700;
color: #394a6d;
position: absolute;
bottom: 0px;
}
<div class="custom-select-wrapper">
<div class="custom-select">
<div class="custom-select__trigger">
<span>Option 1</span>
<div class="arrow"></div>
</div>
<div class="custom-options">
<span class="custom-option selected" data-value="tesla">Option 2</span>
<span class="custom-option" data-value="volvo">Option 3</span>
</div>
</div>
</div>
The above code is a solution strictly from a styling point of view. But as per #CBroe remarks, from a usability point of view (for example using the select via keyboard is impossible), the code is not optimal.
This is why I came up with a solution that uses the jQuery plugin Select2
If anyone is interested here is a link to the code
https://www.codeply.com/p/Z999PpuSOK
https://codepen.io/adambene/pen/xRWrXN
<div class="upload-btn-wrapper">
<button class="btn">Upload a file</button>
<input type="file" name="myfile" />
</div>
.upload-btn-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
cursor: pointer;
}
.btn {
border: 2px solid gray;
color: gray;
background-color: white;
padding: 8px 20px;
border-radius: 8px;
font-size: 20px;
font-weight: bold;
cursor: pointer;
}
.upload-btn-wrapper input[type=file] {
font-size: 100px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
cursor: pointer;
}
In this example, I want to add cursor:pointer css property, which turns the mouse pointer to hand symbol when hovering over it. However, I am not able to achieve the same. I tried adding the property to all three css elements in all combinations, but that does not work.
You could add font-size to your input and it should work. Pay attention to font-size: 20px;
.upload-btn-wrapper input[type=file] {
position: absolute;
left: 0;
top: 0;
opacity: 0;
font-size: 20px;
cursor: pointer;
}
This question already has an answer here:
How do I make :after box same size as parent and responsive? transform: scale(1) works, but why?
(1 answer)
Closed 2 years ago.
I have created a simple responsive login form. That allows the user to log-in and reset password. When filling out the username/password fields, both of these fields are mixed together and not on seperate lines. I have checked to see if the CSS layout was correct but I cannot seem to find a reason as to why the username and password fields do this.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: url(backgroundTwo.jpg) no-repeat center;
background-size: cover;
font-family: sans-serif;
}
.login {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
.form {
position: relative;
width: 100%;
max-width: 380px;
padding: 80px 40px 40px;
background: rgba(0, 0, 0, 0.7);
border-radius: 10px;
color: #fff;
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5);
}
.form::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: rgba(255, 255, 255, 0.08);
border-radius: 10px;
pointer-events: none;
}
.form img {
position: absolute;
top: -50px;
left: calc(50% - 50px);
width: 100px;
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
}
.form h2 {
text-align: center;
letter-spacing: 1px;
margin-bottom: 2rem;
color: #ff652f;
}
.form .input input {
width: 100%;
padding: 10px 0;
font-size: 1rem;
letter-spacing: 1px;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid #fff;
outline: none;
background-color: transparent;
color: indianred;
}
.form .input label {
position: absolute;
top: 0;
left: 0;
padding: 10px 0;
font-size: 1rem;
pointer-events: none;
transition: .3s ease-out;
}
.form .input input:focus+label .form .input input:valid+label {
transform: translateY(-18px);
color: #ff652f;
font-size: .8rem;
}
.submit-button {
display: block;
margin-left: auto;
border: none;
outline: none;
background: #ff652f;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
.forgot-password {
color: inherit;
}
#forgot-password {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 0;
left: 0;
right: 0;
height: 0;
z-index: #fff;
opacity: 0;
transition: 0.6s;
}
#forgot-password:target {
height: 100%;
opacity: 1;
}
.close {
position: absolute;
right: 1.5rem;
top: 0.5rem;
font-size: 2rem;
font-weight: 900;
text-decoration: none;
color: inherit;
}
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="LoginTwo.css">
<title>LoginFormTwo</title>
</head>
<body>
<div class="login">
<form action="" class="form">
<img src="avatarTwo.jpg" alt="">
<h2>Login</h2>
<div class="input">
<input type="text" name="loginUser" id="loginUser">
<label for="loginUser">User Name</label>
</div>
<div class="input">
<input type="password" name="loginPassword" id="loginPassword">
<label for="loginPassword">password</label>
</div>
<input type="submit" value="login" class="submit-button">
Forgot Password?
</form>
<div id="forgot-password">
<form action="" class="form">
×
<h2>Reset Password</h2>
<div class="input">
<input type="email" name="email" id="email" required>
<label for="email">Email</label>
</div>
<input type="submit" value="Submit" class="submit-button">
</form>
</div>
</div>
</body>
</html>
The problem I see here is that you didn't set a position: relative; to the <div> with class .input.
Since you set a position: absolute; to the label, its positioning is calculated from the closest parent with a position: relative; set. In your case, it's the <form> with class .form
Try adding these changes:
.form .input {
position: relative;
}
and adjust the top property of the label:
.form .input label {
top: -30px;
}
Here's a working Codepen
Hope this helps!
It's because your form is set to absolute so your labels are relative to the form.
By putting top: 0; your labels will be on top of the form. You can fix this by changing the .input position to relative like so:
.input {
position: relative;
}
And you can change the labels position by modifying the top value
.form .input label {
top: -25px /*or any value you want*/
}
Problem:
Position absolute with parent align center is not working in IE, but working in Chrome/Safari.
Expected:
Should behave the same with IE 11 browser.
IE 11 screenshot
.selectContainer {
position: relative;
display: flex;
align-items: center;
}
.selectContainer .select {
border: 1px solid #8e99ab;
border-radius: 4px;
font-size: 1rem;
width: 100%;
background-color: #fff;
height: 50px;
padding: 12px 42px 12px 12px;
}
.selectContainer i {
color: #707070;
background: red;
position: absolute;
right: 0px;
padding: 0 16px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="selectContainer">
<select name="" id="" class="select"></select>
<i class="fa fa-sort"></i>
</div>
You can use top:50%;transform:translateY(-50%); for .selectContainer i I tested it.
.selectContainer i {
color: #707070;
background: red;
position: absolute;
right: 0px;
padding: 0 16px;
top: 50%;
transform: translateY(-50%);
}
You could add the CSS bottom: 16px; property to the .selectContainer i, like this:
.selectContainer i {
color: #707070;
background: red;
position: absolute;
right: 0px;
bottom: 16px;
padding: 0 16px;
}
The sample output in IE11 browser:
I am trying to create input fields that look like this
which is easy enough because I can add a white background to the label with some padding. The problem is when the field appears on a non-white background like this
Is there any way to accomplish this with a transparent background on the label?
https://jsfiddle.net/jgu61qaq/
<div class="floating-label bg-white">
<label>Label</label>
<input type="text" value="Something">
</div>
<div class="floating-label bg-gray">
<label>Label</label>
<input type="text" value="Something">
</div>
<style>
.floating-label {
padding: 20px;
position: relative;
font-family: Arial, sans-serif;
}
.bg-white {
background: #fff;
}
.bg-gray {
background: #eee;
}
input {
padding: 5px 10px;
font-size: 14px;
}
label {
font-size: 11px;
position: absolute;
top: 15px;
left: 25px;
background: #fff;
padding: 0 5px;
}
</style>
Maybe something like this?:
label {
position: relative;
top: -16px;
left: 46px;
z-index: 0;
}
label:before {
z-index: -1;
content: '';
display: block;
width: 100%;
height: 50%;
background-color: #fff;
position: absolute;
top: 50%;
margin-top: -1px;
}
https://jsfiddle.net/jgu61qaq/3/
I used :before selector to create a white 50% height of label element to hide the border
body{
background-color:#ececec;
}
fieldset{
padding: 0;
width: 0;
background-color: #FFF;
border: 1px solid gray;
}
fieldset input{
border:none;
margin-top:-10px;
height:25px;
background-color:transparent;
}
<fieldset>
<legend>Lorem Ipsum:</legend>
<input type="text">
</fieldset>