I am not very good in css and designing websites.
I don't get the rid of it.
I want to add an input field with inside button for submit. This is all inside a wordpress website as a shortcode.
It should look like this:
HTML
.event_form_autocomplete {
width: 90%;
padding: 15px;
border: 1px solid #002652;
color: #002652;
font-size: 15px;
}
.event_form_submit {
margin-left: -59px;
padding: 14px;
width: 50px;
background: #002652;
color: white;
border: 0;
}
.event_form_arrow {
color: white;
position: absolute;
margin-top: 17px;
margin-left: -23px;
}
<input class="form-control event_form_autocomplete" id="autocomplete" name="eventAdress" placeholder="Bitte gebe Sie Ihre PLZ oder Ort ein ..." onFocus="geolocate()" type="text" required>
<input class="event_form_submit" type="submit" value="" /><i class="event_form_arrow icon-right-open white"></i>
http://jsfiddle.net/s5GVh/2953/
But it looks like this in
Mozilla
Safari
Opera
Chrome
All with the newest version.
Try this code
HTML
<div class="input-wrapper">
<input class="form-control event_form_autocomplete" id="autocomplete" name="eventAdress" placeholder="Bitte gebe Sie Ihre PLZ oder Ort ein ..." onFocus="geolocate()" type="text" required>
<button class="event_form_submit" type="submit" value="" /><i class="event_form_arrow icon-right-open white"></i></button>
</div>
CSS
.input-wrapper{
position: relative;
border: 1px solid #002652;
}
.event_form_autocomplete {
width: 100%;
padding: 15px;
color: #002652;
font-size: 15px;
border-width: 0;
box-sizing: border-box;
}
.event_form_submit {
margin: 0;
padding: 14px;
width: 50px;
background: #002652;
color: white;
border: 0;
position: absolute;
top: 4px;
right: 4px;
height: 39px;
}
.event_form_arrow {
color: white;
position: absolute;
margin-top: 17px;
margin-left: -23px;
}
Hope it's work for you -webkit-padding-before:10px;
.event_form_submit {
margin-left: -59px;
padding: 14px;
-webkit-padding-before:10px;
width: 50px;
background: #002652;
color: white;
border: 0;
}
Related
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 am trying to remove spacing between elements stacked on each other.
This is what i have:
input[type="text"] {
width: 40%;
height: 30px;
border-radius: 29px;
border-style: none;
padding-right: 100px;
padding-left: 30px;
border-width: 0;
}
input[type="submit"] {
margin-left: -100px;
height: 30px;
width: 100px;
border-width: 0;
border-radius: 29px;
background: blue;
color: white;
-webkit-appearance: none;
}
body {
background-color: black;
}
<br/>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" placeholder="Enter your email"><input type="submit">
</form>
I have tried top:0; and bottom:0; but it does not seem to solve my problem in this example.
Remove padding-top and padding-bottom on input[type="text"]
padding-top: 0px;
padding-bottom: 0px;
input[type="text"] {
padding-top: 0px;
padding-bottom: 0px;
width: 40%;
height:30px;
border-radius: 29px;
border-style:none;
padding-right:100px;
padding-left:30px;
border-width: 0;
}
input[type="submit"] {
margin-left: -100px;
height:30px;
width: 100px;
border-width: 0;
border-radius: 29px;
background: blue;
color: white;
-webkit-appearance: none;
}
body {
background-color: black;
}
<br/>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" placeholder="Enter your email"><input type="submit">
</form>
Remove the top bottom padding of input[type="text"].
input[type="text"] {
width: 40%;
height: 30px;
border-radius: 29px;
border-style: none;
padding-right: 100px;
padding-left: 30px;
padding-top: 0;
padding-bottom: 0;
}
I removed the height property from both elements and added it to the container, the form. Then added display: flex to the form.
form {
height: 30px;
display: flex;
}
input[type="text"] {
width: 40%;
border-radius: 29px;
border-style: none;
padding-right: 100px;
padding-left: 30px;
border-width: 0;
}
input[type="submit"] {
margin-left: -100px;
width: 100px;
border-width: 0;
border-radius: 29px;
background: blue;
color: white;
-webkit-appearance: none;
}
body {
background-color: black;
}
<br/>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" placeholder="Enter your email"><input type="submit">
</form>
I'm making a search bar with a button next to it.
The button is perfectly aligned with the search bar on Chrome and Opera, but on Firefox the button goes up by a couple of pixels.
I've tried to play with the padding and the margin but it don't seems to work.
Here's my code and what it looks like on Chrome and Firefox :
HTML :
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/fontawesome.min.css" rel="stylesheet">
<form id="gameSearch" action="#">
<input type="text" name="game_search" maxlength="16" placeholder="Search...">
<button class="icon"><i class="fa fa-search"></i></button>
</form>
CSS :
button.icon {
margin-left: -5px;
background-color: #9b59b6;
border: 0 none;
color: white;
font-size: 25px;
width: 75px;
height: 50px;
cursor: pointer;
}
button.icon:hover {
background-color: #8e44ad;
}
input[type="text"] {
border: 0 none;
background-color: #ffffff;
height: 50px;
width: 350px;
font: 25px sans-serif;
padding: 0 0 0 5px;
}
form#gameSearch {
padding: 50px 0;
margin: 0 auto;
width: 430px;
}
What it looks like :
In Chrome
In FireFox
Add vertical-align: top; to the input field:
body {
background: #ddd;
}
button.icon {
box-sizing: border-box;
margin-left: -5px;
background-color: #9b59b6;
border: 0 none;
color: white;
font-size: 25px;
width: 75px;
height: 50px;
cursor: pointer;
}
button.icon:hover {
background-color: #8e44ad;
}
input[type="text"] {
box-sizing: border-box;
border: 0 none;
background-color: #ffffff;
height: 50px;
width: 350px;
font: 25px sans-serif;
padding: 0 0 0 5px;
vertical-align: top;
}
form#gameSearch {
padding: 50px 0;
margin: 0 auto;
width: 430px;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/fontawesome.min.css" rel="stylesheet">
<form id="gameSearch" action="#">
<input type="text" name="game_search" maxlength="16" placeholder="Search...">
<button class="icon"><i class="fa fa-search"></i></button>
</form>
I want to make the search bar longer and higher. Lining up with the end of the body (width) and menu (heighth). I looked at other tutorials and questions but I am missing something.
CSS
form input[type="text"] {
height: 45px;
width: 250px;
margin: 0;
padding: 0;
font-size: 15px;
border: 1px solid #CCCCCC;
float: left;
}
HTML
<form name="catsearchform60238" method="post" action="/Default.aspx?SiteSearchID=2433&PageID=/search.html">
<div class="cat_textbox">
<input type="text" value="text field"></input>
<input type="submit" value="Submit"></input>
</form>
Using display: block; is probably what you are looking for.
form input[type="text"] {
display: block;
height: 45px;
width: 250px;
margin: 0;
padding: 0;
font-size: 15px;
border: 1px solid #CCCCCC;
float: left;
}
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;
}