To make room for an icon, I have moved the placeholder text 35px to the right of my input; However, when I start to type in the input field, the text starts behind the icon.
I attempted a bit of googling, but i have yet to find an answer. The search results I've seen regard the placeholder, but it is not what I am having troubles with.
How do I move the text which is being inputted, so it matches that of the placeholder? (form-group__input)
.login {
background-color: $color-white;
width: 30vw;
position: absolute;
#include position-center;
padding: 20px;
}
.login h2 {
color: $color-gray;
font-weight: bold;
}
.login .form-group {
width: 80%;
margin: 10px auto;
position: relative;
}
.login .form-group .form-group__input {
background: none;
border: 1px solid gray;
padding: 10px;
border-radius: 6px;
width: 100%;
}
.login .form-group .form-group__input::placeholder {
padding-left: 35px;
}
.login .form-group__icon {
position: absolute;
left: 15px;
font-size: 22px;
color: gray;
top: 6px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<section class="login">
<h2>Login</h2>
<div class="form-group">
<input type="email" placeholder="someemail#email.com" class="form-group__input">
<span class="form-group__icon"><i class="far fa-envelope"></i></span>
</div>
<div class="form-group">
<input type="password" placeholder="**********" class="form-group__input">
<span class="form-group__icon"><i class="fas fa-lock"></i></span>
</div>
Log In
Create Account
</section>
Plz try this code..
css
.form-group__input {
padding: 10px 10px 10px 40px;
}
Related
I am trying to fix the custom dropdown arrow size but when i zoom in or zoom out webpage size of custom dropdown also changed.. Is there any solution for that??
This is current web page
When I zoom in or zoom out custom arrow size will be changed..
Here is my code :-
.container select {
border-radius: 20px;
padding: 5px 38px 7px 23px;
border: 2px solid orange;
appearance: none;
position: relative;
}
.container i.fa-angle-down {
position: absolute;
right: 69%;
top: 92.5%;
border-radius: 20px;
color: white;
background-color: orange;
padding: 8px;
padding-left: 10px;
font-size: 20px;
pointer-events: none;
}
<div class="container">
<h6>Current open positions</h6>
<div class="form-group">
<label class="search">Search by Location</label>
<select>
<option>Canada</option>
<option>USA</option>
</select><i class="fas fa-angle-down"></i>
</div>
</div>
Supply a relative container to act as a boundary for the absolute positioned child. Something like below, cheers;
.container select {
border-radius: 20px;
padding: 5px 38px 7px 23px;
border: 2px solid orange;
appearance: none;
position: relative;
}
.container i.fa-angle-down {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 1rem;
border-radius: 20px;
color: white;
background-color: orange;
padding: 8px;
padding-left: 10px;
font-size: 20px;
pointer-events: none;
}
.custom-dd {
display: inline-block;
position: relative;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet"/>
<div class="container">
<h6>Current open positions</h6>
<div class="form-group">
<label class="search">Search by Location</label>
<div class="custom-dd">
<select>
<option>Canada</option>
<option>USA</option>
</select>
<i class="fas fa-angle-down"></i>
</div>
</div>
</div>
I'd like to know the code in CSS so my two different input types be equal in every monitor.
So I have 1 big input type, and below 7 inputs that should cover the same width. Its all great in my 17.3inch monitor with fullhd. But in anothers, the seven inputs surpass the first one.
Here's the code:
input[type="text"] {
font: 95% oxygen, sans-serif;
border:2px solid rgb();
width: 7%;
height: 2%;
padding: 0px;
margin-right: 0%;
padding: 10px;
background: #ffffff;
}
input[type="text1"] {
font: 95% oxygen, sans-serif;
border:2px solid rgba();
width: 50%;
height: 2%;
padding: 2px;
margin-right: 0%;
margin-left: 0%;
padding: 10px;
background: #ffffff;
Please help me, I saw every forum but I cant get it.When its wrong, it looks like this
I think as per your scenario this solution should work:
// JavaScript to toggle text placeholder for small inputs
$('.smallText').on('input', function () {
if ($(this).val().length) {
$(this).parent().addClass('empty');
} else {
$(this).parent().removeClass('empty');
}
});
.clearfix::before, .clearfix::after {
content: '';
display: table;
clear: both;
}
.container {
padding: 10px;
}
.largeText, .smallText {
padding: 5px;
border: 1px solid #999;
font-size: 16px;
margin-bottom: 5px;
box-sizing: border-box;
outline: none;
}
.largeText {
width: 100%;
}
.textWrapper {
box-sizing: border-box;
position: relative;
float: left;
width: 20%;
}
.textWrapper+.textWrapper {
padding-left: 5px;
}
.textWrapper::before {
content: 'small text...';
display: block;
padding: 5px;
border: 1px solid #999;
color: #777;
font-family: Arial;
}
.textWrapper.empty::before {
color: transparent;
}
.smallText {
position: absolute;
top: 0;
width: 100%;
padding: 5px 10px 5px 5px;
border: 0;
background-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<input type="text" placeholder="large text..." class="largeText" />
<div class="inner-container clearfix">
<div class="textWrapper"><input type="text" class="smallText" /></div>
<div class="textWrapper"><input type="text" class="smallText" /></div>
<div class="textWrapper"><input type="text" class="smallText" /></div>
<div class="textWrapper"><input type="text" class="smallText" /></div>
<div class="textWrapper"><input type="text" class="smallText" /></div>
</div>
</div>
I'm almost done, but my problem is the background of the text , I even try the opacity but the underline of the box appear.
.block {
display: inline-block;
border: 2px solid white;
padding: 5px;
margin-top: 1em;
}
.paddingbox{
padding: 60px;}
.boxed {
float: left;
color: white;
padding: 0 5px;
margin-top: -2em;
}
<div class="paddingbox"><center>
<div class="block">
<span class="boxed">
<h1 style="color:white;"><?php echo get_the_title(); ?></h1></span>
</div></center></div>
With backgroun color
without background color
I'm trying to achive is like this, but it have a back ground like in the picture above
I tried fieldset and this happen
The behavior can be achieved with a fieldset tag.
.block{
display: inline-block;
border: 2px solid white;
}
.title{
color: white;
font-size: 1.5em;
text-align: center;
}
body{
background: purple;
}
<fieldset class="block">
<legend class="title">
Services
</legend>
</fieldset>
I get help of positions for solve this question!
div {
position: relative;
width: 400px;
padding: 10px;
border: 1px solid;
}
span {
position: absolute;
top: -10px;
left: 40%;
background-color: #FFF;
font-weight: bold;
}
<div>
<span>About Us</span>
</div>
I am currently working with an input field that will do search for my page. But I am undergoing some css styling issues. I have placed inside the input field the submit button which is an image of a magnifying glass. the problem is that the button does not stay in its place through cross browsers. It looks ok in firefox but others browsers it looks bad.
How can i get the submit button to stay inside the input field at all times? EXAMPLE
thank you!
CSS related to object
<style>
.search-input {
padding: 0 5px 0 22px;
border: 2px solid #DADADA;
height: 30px;
font-size: 12px;
line-height: 30px;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
background: #FFF; /* old browsers */
}
.search-input li {
list-style: none outside none;
}
.search-submit {
width: 13px;
height: 13px;
border: none;
background: url(http://webprolearner2346.zxq.net/css-test2/images/mag-glass.png) no-repeat;
display: block;
position: absolute;
right: 170px;
text-indent: -9999em;
top: 60px;
}
.search{
float: right;
margin-right: 30px;
margin-top: 35px;
}
</style>
HTML
<div id="header">
<div class="search"><input type="text" class="search-input" name="search" value="Search"/><input type="submit" class="search-submit" /></div>
</div>
Use this much better approach I came across. It works well and tested with web developer tools. Cheers#!!!
HTML
<div id="header">
<form id="search">
<input id="searchField" type="text" />
<input id="searchSubmit" type="submit" value="" />
</form>
</div>
CSS
#search{
float: right;
margin-right: 30px;
margin-top: 35px;
}
#searchField{
border: 1px solid #FFEDE8;
float: left;
height: 20px;
padding-right: 25px;
width: 140px;}
#searchSubmit{
background: url("http://webprolearner2346.zxq.net/css-test2/images/mag-glass.png") no-repeat scroll 0 0 transparent;
border: medium none;
cursor: pointer;
height: 20px;
margin-left: -22px;
margin-top: 5px;
width: 20px;
}
I want to make a button to appear in the next line . But i tried to use the attributes "position" and "line-height" of the button but nothing is changed .i want it in the center of the next line under the input text of tne name
this is my code :
css file :
#popup {
font-family: 'Orbitron', serif;
font-size: 28px;
font-weight: 700;
text-shadow: 0px 1px 2px #fff;
color: #222;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,.5);
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
-webkit-transition: all .5s ease-in;}
#popup h1 {
font-weight: 400;
}
#popup-box {
width: 400px;
height: 300px;
background: #ccc url(../images/popup_bg.jpg);
border-radius: 10px;
position: relative;
-webkit-box-shadow: 0 5px 5px #333;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
-webkit-transition: all .5s ease-in;}
#popup-box small {
font-size: .6em; }
#popup.hide {
background: rgba(0,0,0,0);
visibility: hidden;
}
#popup.hide #popup-box{
margin-top: -800px;}
#popup-box a.button {
background: white;
border-radius: 10px;
display: block;
font-size: 30px;
margin: 230px auto 0;
padding: 10px;
width: 50px;
border: 3px solid #006438;
color:#006438;
text-decoration:none;
cursor:pointer;}
html file :
<section id="popup">
<div id="popup-bg">
</div>
<div id="popup-box">
<p><a id="gamelogin1" class="button" href="">choose Name</a></p>
<p><a id="gamelogin2" class="button" href="">New Name</a></p>
</div>
</section>
<section id="popupName" class="hide">
<div id="popup-bg">
</div>
<div id="popup-box">
<label for="firstName">Your Name :</label>
<input type="text" name="firstName" size="20" maxlength="40" id="firstName" />
**<p><a id="validatelogin" class="button" href="">Validate</a></p> //this is the //button i want to change**
</div>
</section>
Add a break line (<br>) after your input field:
<input type="text" name="firstName" size="20" maxlength="40" id="firstName" /><br>
Some would argue that the <br> tag should self-close: <br />, but this isn't necessary.
To make it center, use this CSS:
#validatelogin {
width:100px;
margin: 0 auto;
}
Set width to the proper width of the button; it must be fixed in order for margin: 0 auto; to work.
I'm not sure if I understand your question but maybe you can use it before your button
<div class="both"></div>
In css
.both{
clear: both;
}
You just need
input[type=text]
{
display:block;
}
and
#validatelogin{
display:block;
}
in your CSS. That Would solve your Issue