I was trying to perfect my form layouts.
For some reason the labels on my checkbox won't line each other on each checkboxes.
I am trying my best to make each checkbox label sit to its checkbox using the ff codes:
<div class="form-input-group">
<i class="fa fa-book"></i>
<div class="checkbox-style">
<input type="checkbox" value=""> Math
<input type="checkbox" value=""> Science
<input type="checkbox" value=""> English
</div>
</div>
Any idea what went wrong and how I can fix this issue?
You can check the actual site here: http://americanbitcoinacademy.com/test/student-registration.html via Chrome's inspector tools.
Update this css , this will fix your issue , style.css , line number 1163
.sign-up .signup-form .form-input-group input[type="checkbox"] {
height: 27px;
margin-top: 0;
position: relative;
top: 8px;
width: 20px;
}
In styles.css on like 1166 (for .sign-up .signup-form .form-input-group input[type="checkbox"]), change margin-top:15px; to margin:0;
Then in style.css on like 1168, for .checkbox-style add display: flex; align-items: center; height: 100%;
There are lots of ways to get what you want. My approach would be to use padding on the parent instead of margin on the child elements.
On line 1163, remove margin-top and add vertical-align and margin:
.sign-up .signup-form .form-input-group input[type="checkbox"] {
width: 20px;
height: 27px;
vertical-align: middle;
margin: 0;
}
then on line 1170 add padding to replace margin-top rule:
.checkbox-style {
font-size: 15px;
margin-left: 70px;
padding-top: 15px;
}
Those changes get you this:
Related
I want to align two inputs in the same line.
I used the solutions available here:
http://jsfiddle.net/XAkXg/
http://www.java2s.com/Code/HTMLCSS/Form/inputclassidselectorandpropertyselector.htm
Aligning html inputs on same line
html form - make inputs appear on the same line
Everything would work, but in my case, the input[type=text] has been defined earlier
The CSS code looks pretty much as this:
input {
margin-left: 50px;
}
input[type=text] {
width: 75%;
min-width: 450px;
padding: 12px 20px;
box-sizing: border-box;
outline: none;
border: 1px solid #f7fbff;
background-color: #f7fbff;
}
input[type=text]:focus {
background-color: #c6e2f2;
}
input[type=number]:focus {
background-color: #c6e2f2;
}
and now I have implemented the location feature into my HTML code:
<figure class="fig" id="location">
<label>
<div class="order">1</div>
<p>Location<span class="asterisk">*</span></p>
</label>
<button class="locbtn" id="btn-geolocation">Find my location</button>
<br>
<label for="lat" class="location">Latitude</label>
<input type="text" name="latitude" class="location">
<label for="lon" class="location">Longitude</label>
<input type="text" name="longitude" class="location">
<div style="clear:both;"></div>
</figure>
and accordingly CSS:
.location {
width: 50x;
float: left;
vertical-align: top;
margin: auto;
}
.location input[type=text]{
width: 25px;
display: inline-block;
}
and the effect is, as you can see below:
the input texts don't work, since they have been defined earlier in the code (for entire form).
How can I make the input[type=text] definition also for this section considered?
Moreover, instead of display: inline-block; I tried: display: inline; and float: left; It didn't work either.
I am trying to create Google's Advanced Search page copy. I am new to programming and I'm having 2 problems. First is that link titled "google search" should be inside the gray bar positioned at the start of the page. Second, I am trying to write css code to reverse positions of texts and their correlated input fields, because I noticed in Google's html that it is also coded in reverse and then corrected from initial position.
Help would be greatly appreciated!
.label {
color: rgb(218, 32, 32);
margin-left: 15px;
padding: 15px;
margin-bottom: 15px;
} */
html, body {
padding: 0;
margin: 0;
font-size: 16px;
}
.navbar {
padding: 20px;
text-align: right;
size: default;
}
.navbar a {
margin: 0 10px;
color:black;
text-decoration: none;
}
.navbar a:hover{
text-decoration: underline;
}
.content {
margin-top:100px;
text-align:center;
}
#textbox {
font-size: large;
height: 30px;
width: 500px;
border-radius: 25px;
}
.graybar{
background-size: 75% 50%;
background: #f1f1f1;
font: 13px/27px Arial,sans-serif;
height: 60px;
width: 100%;
}
#image {
height: 33px;
width: 92px;
margin: 15px;
}
.margin {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
body {
font-family: arial,sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Advanced Search</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="graybar">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" id=image>
<div class=navbar>
<a href="index.html">
Google Search
</a>
</div>
</div>
<div class="label">Advanced Search</div>
<h3 style="font-weight:normal">Find pages with...</h3>
<form action="https://google.com/search">
<input class="margin" value autofocus="autofocus" id="xX4UFf" name="as_q" type="text">
<label for="xX4UFf" class="float">all these words:</label>
<br>
<input class="margin" value autofocus="autofocus" id="CwYCWc" name="as_epq" type="text">
<label for="CwYCWc" class="float">this exact word or phrase:</label>
<br>
<input class="margin" value autofocus="autofocus" id="mSoczb" name="as_oq" type="text">
<label for="mSoczb" class=float>any of these words:</label>
<br>
<input class="margin" value autofocus="autofocus" id="t2dX1c" name="as_eq" type="text">
<label for="t2dX1c" class="float">none of these words:</label>
<br>
<input type="submit">
</form>
</body>
</htmL>
Here is how website looks
Assuming that you can change your HTML, flexbox is the solution to both of your issues.
Let's start with your header. You need your image and your text to be both in the grey box, with the image on the left side and the text on the right side.
If you set your header to use display: flex, then you can specify justify-content: space-between to tell the browser to render the child elements with as much space as is possible between them. For two children, that will result in the first child being on the left, and the second child being on the right. If there were more children, they'd be spaced evenly between (eg left, middle, right for three children etc.)
In your case, this would simply require adding the appropriate styling to the .graybar class which is serving as your header:
.graybar {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.graybar {
display: flex;
flex-direction: row;
justify-content: space-between;
background-size: 75% 50%;
background: #f1f1f1;
font: 13px/27px Arial, sans-serif;
height: 60px;
width: 100%;
}
.navbar {
padding: 20px;
text-align: right;
size: default;
}
.navbar a {
margin: 0 10px;
color: black;
text-decoration: none;
}
.navbar a:hover {
text-decoration: underline;
}
#image {
height: 33px;
width: 92px;
margin: 15px;
}
body {
font-family: arial, sans-serif;
}
<div class="graybar">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" id=image>
<div class=navbar>
Google Search
</div>
</div>
I've left the other styling as you had in your original.
CSS's flexbox is extremely powerful; you can use it for your other issue with the labels/inputs as well, if you can modify your HTML. Looking at the actual Google advanced search page here, your HTML doesn't actually look anything like the original, so I'm assuming you're not restricted to keeping the same HTML as you have in your original post.
Let's instead structure our HTML like this:
<div class="row">
<input type="text" id="allwords" >
<label for="allwords">All these words</label>
</div>
We can now apply display: flex to each row and leverage the flex-direction property to reverse the order of the children so that the label is displayed prior to the input.
.row {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
label {
display: block;
margin-right: 8px;
}
<div class="row">
<input type="text" id="allwords">
<label for="allwords">All these words:</label>
</div>
Generally I wouldn't recommend doing it like this, but I'm equally unsure why you're trying to force inputs before labels in your HTML. :)
For more information about CSS's flexbox, I highly recommend this guide from CSS-Tricks.
Here's what I currently have:
<input type="text" name="amount" style="height:40px;width:200px;font-size:23px;text-align:center;" value="${$amount}" />
This is the part I'm specifically talking about:
value="${$amount}"
By default that shows $10.00 which is what I want. However, I don't want users to be able to edit the $ symbol. It should always remain there AND I don't want the dollar symbol submitted with the form. It's simply there for appearance so that users know the currency.
You can put the dollar sign as a background image for the input and leave some padding-left so that the text doesn't go over the background image.
You could use a pseudo element.
DEMO
<label>Label</label>
<span><input type="text" placeholder="Placeholder"></span>
input {
padding: 10px;
padding-left: 15px;
margin-left: 10px;
}
span:before {
content: "$";
position: relative;
left:10px;
margin-right: -15px;
}
Requires a wrapper element around your input as you cant generate a pseudo element on an input
Your best option is to put the sign outside the input element.
Try this: http://jsfiddle.net/mgmBE/45/
HTML:
<div class="input-container">
<input type="text" value="amount" name="" />
<span class="unit">$</span>
</div>
CSS:
.input-container {
position: relative;
width: 100px;
}
.input-container input {
width: 100%;
}
.input-container .unit {
position: absolute;
top: 3px;
right: -3px;
background-color: grey;
color: #ffffff;
padding-left: 5px;
width:20px;
}
Pseudo Element is the best option as very easy to place.
<label>Input:</label><span><input type="text" placeholder="Placeholder"></span>
CSS
input {
padding: 10px;
margin-left:15px;
}
span:before {
content: "$";
margin-right:-15px;
position: relative;
left:10px;
}
I am designing a web page with multi line Label name & input type file. i tried very hard to arrange in same line sequence but failed to do. Is there any idea about it?
please take a look enter link description here , it looks very ugly and
I am not really sure what you are looking for, but check out the jsfiddle changes I had made. I modified both CSS classes a little bit.
Have a look at this tutorial: http://www.websiteoptimization.com/speed/tweak/forms/
You can check this fiddle with the following modifications:
removing deprecated attributes align from div and moving inlined CSS style (style attribute) to the CSS file
same for b element used for the text of the label: span is better, and it's already bold as its parent. Or font-weight: bold; would be added in CSS
display: inline-block; is used instead of floats. No need to clear them afterward. IE7 and 6 need a fix (in comment) if you support them. This allow you to give the element a width (like you could do with any block element) and still get them on the same horizontal line (like you could do with any inline element). You'll have 4px due to whitespace in your HTML code, because whitespace shows up in inline element like two span separated by a space but there's a fix.
HTML code
<div id="divid1">
<p>
<label class="labelname"> <span> select Image* :</span>
<input type="file" name="file1" class="hide-file" />
</label>
</p>
<p>
<label class="labelname"> <span>XML File* :</span>
<input type="file" name="file2" class="hide-file" />
</label>
</p>
</div>
CSS
#divid1 {
padding: 50px;
}
.labelname {
width: 100%; /* or at least approx. 380px */
min-height: 30px;
display: block;
background: lightgreen;
font-weight: bold;
margin-bottom: 2px;
}
/* Only for IE7 */
/*.labelname span,
.hide-file {
display: inline;
zoom: 1;
}
*/
.labelname span {
display: inline-block;
width: 140px;
text-align: right;
background-color: lightblue;
}
.hide-file {
display: inline-block;
opacity:0.5;
}
now it looks good :)
html
<div id="divid1" align="center" style="padding:50px;">
<div class="formrow">
<label class="labelname" for="hide-file">Select Image* :</label>
<input type="file" name="file1" class="hide-file" />
</div>
<div class="formrow">
<label class="labelname" for="hide-file">XML File* :</label>
<input type="file" name="file2" class="hide-file" />
</div>
</div>
css
.labelname {
background: green;
font: bold 2px;
margin-bottom: 2px;
font-weight: bold;
float: left
}
.hide-file {
position: relative;
opacity: 0.5;
float: right
}
.formrow {
width: 400px
}
Please answer the following questions:
How to merge search box and search button as shown in below example1 and example2? The box and button are joined together.
How to put 'magnifier' icon on the left side of the search box?
How to put a default text into the box like 'Search for items' and fade it when user clicks on the box.
Example1
Example2
Example3 (I don't want a separate button as shown below)
Please help! Thanks!!
Easiest way is to make the entire text field wrapper, from the icon on the left to the button on the right, one div, one image.
Then put a textfield inside that wrapper with a margin-left of like 30px;
Then put a div inside the wrapper positioned to the right and add a click listener to it.
HTML:
<div id="search_wrapper">
<input type="text" id="search_field" name="search" value="Search items..." />
<div id="search_button"></div>
</div>
CSS:
#search_wrapper{
background-image:url('/path/to/your/sprite.gif');
width:400px;
height:40px;
position:relative;
}
#search_field {
margin-left:40px;
background-transparent;
height:40px;
width:250px;
}
#search_button {
position:absolute;
top:0;
right:0;
width:80px;
height:40px;
}
JQuery:
$(function(){
// Click to submit search form
$('#search_button').click(function(){
//submit form here
});
// Fade out default text
$('#search_field').focus(function(){
if($(this).val() == 'Search items...')
{
$(this).animate({
opacity:0
},200,function(){
$(this).val('').css('opacity',1);
});
}
});
});
For your first question, there are many ways to accomplish the joining of the button to the search box.
The easiest is to simply float both elements to the left:
HTML:
<div class="wrapper">
<input placeholder="Search items..."/>
<button>Search</button>
</div>
CSS:
input,
button {
float: left;
}
Fiddle
This method has some limitations, however, such as if you want the search box to have a percentage-based width.
In those cases, we can overlay the button onto the search box using absolute positioning.
.wrapper {
position: relative;
width: 75%;
}
input {
float: left;
box-sizing: border-box;
padding-right: 80px;
width: 100%;
}
button {
position: absolute;
top: 0;
right: 0;
width: 80px;
}
Fiddle
The limitation here is that the button has to be a specific width.
Probably the best solution is to use the new flexbox model. But you may have some browser support issues.
.wrapper {
display: flex;
width: 75%;
}
input {
flex-grow: 2;
}
Fiddle
For your second question (adding the magnifier icon), I would just add it as a background image on the search box.
input {
padding-left: 30px;
background: url(magnifier.png) 5px 50% no-repeat;
}
You could also play around with icon fonts and ::before pseudo-content, but you'll likely have to deal with browser inconsistencies.
For your third question (adding placeholder text), just use the placeholder attribute. If you need to support older browsers, you'll need to use a JavaScript polyfill for it.
It's all in the CSS... You want something like this:
http://www.red-team-design.com/how-to-create-a-cool-and-usable-css3-search-box
Also, for the search icon:
http://zenverse.net/create-a-fancy-search-box-using-css/
Src: Quick Google.
You don't merge them, rather you give the illusion that you have. This is just CSS. Kill the search box borders, throw it all into a span with a white background and then put the fancy little dot barrier between the two things. Then toss in some border radius and you are in business.
The above tut might look too lengthy. The basic idea is this:
Arrange the input box just like you do. The input text box should be followed by the button. add the following css to do that.
position:relative;
top:-{height of your text box}px;
or you can use absolute positioning.
<div id="search_wrapper">
<input type="text" id="search_field" name="search" placeholder="Search items..." />
<div id="search_button">search</div>
</div>
#search_wrapper{
background-color:white;
position:relative;
border: 1px solid black;
width:400px;
}
#search_field {
background-transparent;
border-style: none;
width: 350px;
}
#search_button {
position:absolute;
display: inline;
border: 1px solid black;
text-align: center;
top:0;
right:0;
width:50px;
}
http://jsfiddle.net/zxcrmyyt/
This is pretty much easy if You use bootstrap with custom css
My output is diffrent but the logic works as it is..
I have used Bootstrap 5 here you can also achieve this by using Pure CSS,
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-10 p-0 inputField text-center">
<input type="text" id="cityName"placeholder="Enter your City name..">
<input type="submit" value="search" id="submitBtn">
</div>
</div>
</div>
For Styling
#import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
* {
font-family: 'Ubuntu', sans-serif;
}
.inputField {
position: relative;
width: 80%;
}
#cityName {
width: 100%;
background: #212529;
padding: 15px 20px;
color: white;
border-radius: 25px;
outline: none;
border: none;
}
#submitBtn {
position: absolute;
right: 6px;
top: 5px;
padding: 10px 20px;
background: rgb(0, 162, 255);
color: white;
border-radius: 40px;
border: none;
}
Hear is an Example !
https://i.stack.imgur.com/ieBEF.jpg