I am trying to decrease the height of the text box .style sheet does not seem to decrease the height of the text box. below is my code and style sheet.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.textmargin{
margin-left: 50px;
}
.new5 {
border: 5px solid green;
border-radius: 2px;
}
.textBoxwidthlarge{
width:40%
}
.textBoxwidthMedium {
width: 20%
}
.textBoxwidthSmall {
width: 40%
}
input[type="text"] {
padding: 12px 10px;
line-height: 2px;
border: 2px solid black;
}
</style>
<div class="col-md-12"><label for="fname" class="textmargin">First Name</label><br />
<input type="text" runat="server" class="input-field textmargin textBoxwidthlarge" id="name1" name="t1" /> </div>
I want the height like so:
any help will be appreciated. I have three text boxes inside a . I am only showing one above.
this way you can customize as you wish
<div class="col-md-4"><label for="fname" class="textmargin">First Name</label><br />
<input type="text" runat="server" class="textmargin textBoxwidthlarge txtboxhg" id="name1" name="t1" /> </div>
<style>
input[type="text"]{ padding: 12px 10px; line-height: 12px; width:100%}
</style>
Remove all the unnecessary styles from your code and just keep one class to set its width.
.textBoxwidthlarge {
width: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="col-md-12"><label for="fname" class="textmargin">First Name</label><br />
<input type="text" runat="server" class="input-field textmargin textBoxwidthlarge" id="name1" name="t1" /> </div>
To reduce the height of the text box and add a border, add
height: 1px;
border: 2px solid red;
to the .txtboxhg class
You can decide on your own color and border size.
Related
How do I add an icon as the placeholder text inside an input field?
The icon is placed outside of the input field. I tried moving it using padding and margin, but I can't seem to position it exactly where I want it.
Your best option is either using CSS Grid or Flexbox to center the icon within a wrapper element.
You can read more about Grid here:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
And you can read more about Flexbox here:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
Here is an example using Grid:
body {
background: #F5F5F6;
}
label {
display: grid;
grid-template: 1fr / auto 1fr;
gap: 12px;
border: 1px solid #CFD5DB;
border-radius: 5px;
background: #fafafa;
padding: 12px;
color: #6C757D;
cursor: text;
}
label:focus-within {
border: 1px solid #000;
}
label>input {
outline: none;
border: none;
background: transparent;
}
<label>
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
<input placeholder="Enter Hotel name" type="search" />
</label>
A couple of important things to note about this example:
I've used a label element to wrap the input. This gives us the behavior of clicking the icon to focus the input field without needing to use javascript.
I've used input[type=search] because that is more semantically correct for your usage, and will aid users of screen readers in understanding the purpose of the text field.
I've used the :focus-within pseudo-selector to target and style the label when its child input is focused.
I've opted to use an svg icon but an img based icon will work just as well.
I could've used Flexbox just as easily but I wanted to use the gap property on the wrapping label instead of setting a margin on the icon or input. gap also works with Flexbox the same way it does with Grid except that Safari only supports gap on Grid layouts. If you opt for the Flexbox method, use a margin on one of the child elements instead of gap.
If you are using bootstrap4/bootstrap5 you can do easily
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<div class="container">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fas fa-search"></i>
</div>
</div>
<input type="text" placeholder="search here" class="form-control" name="search" />
</div>
</div>
Check this
Place the two inline controls (the image and the input) into a container (e.g. a Div).
The container must be styled position:relative
Style the inline elements as position:absolute; top:0; left:0, which will place them one-on-top-of-the-other. Then use z-index to decide which element is on top and which is below.
Then a bit of padding, so that the input text is pushed over to the right to make room for the image... and you have it.
The border-radius is not necessary - it only rounds the corners of the image.
.iwi{
position:relative;
}
img,input{position:absolute;top:0;left:0;}
input{
z-index:1;
font-size:1.3rem;
padding: 3px 5px;
padding-left:25px;
}
img{
z-index:2;
margin-top:7px;
margin-left:3px;
border-radius: 20px;
}
::placeholder{
color: #ddd;
}
<div class="iwi">
<img src="https://placekitten.com/20/20" />
<input type="text" placeholder="Name the kitten" />
</div>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
.input-container {
display: -ms-flexbox; /* IE10 */
display: flex;
width: 100%;
margin-bottom: 15px;
}
.icon {
padding: 10px;
background: dodgerblue;
color: white;
min-width: 50px;
text-align: center;
}
.input-field {
width: 100%;
padding: 10px;
outline: none;
}
.input-field:focus {
border: 2px solid dodgerblue;
}
/* Set a style for the submit button */
.btn {
background-color: dodgerblue;
color: white;
padding: 15px 20px;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.btn:hover {
opacity: 1;
}
</style>
</head>
<body>
<form action="/action_page.php" style="max-width:500px;margin:auto">
<h2>Register Form</h2>
<div class="input-container">
<i class="fa fa-user icon"></i>
<input class="input-field" type="text" placeholder="Username" name="usrnm">
</div>
<div class="input-container">
<i class="fa fa-envelope icon"></i>
<input class="input-field" type="text" placeholder="Email" name="email">
</div>
<div class="input-container">
<i class="fa fa-key icon"></i>
<input class="input-field" type="password" placeholder="Password" name="psw">
</div>
<button type="submit" class="btn">Register</button>
</form>
</body>
</html>
I'm trying to achieve the following:
Create 3 input elements in a row
Each should have a logo to the left of it, centered perfectly.
Each should have a border-bottom that spans the logo as well.
Like the following image:
However with my current code the images can't be centered and the border doesn't span them. Here's my code:
input {
border: none;
width: 250px;
background-color: #393d49;
border-bottom: 1px solid #767D93;
padding: 10px;
}
form img {
width: 24px;
height: 24px;
}
<form>
<img src="assets/images/envelope.png" alt="Envelope icon indicating user's E-Mail.">
<input type="email" placeholder="E-Mail"><br>
<img src="assets/images/locked.png" alt="Lock icon indicating user's Password.">
<input type="password" placeholder="Password"><br>
<img src="assets/images/avatar.png" alt="Avatar icon indicating user's Name.">
<input type="text" placeholder="Username"><br>
</form>
As it was suggested, I would also use the font-awesome library. But if your not comfortable with that idea, here is how you can do without.
form, .form-row, input {
background-color: #051024;
}
.input-icon, label, input {
display: inline-block;
}
form {
padding: 0.8em 1.2em;
}
.form-row {
padding: 0.8em 0;
padding-bottom: 0.2em;
}
.form-row:not(:last-child) {
border-bottom: solid #18273a 1px; /* Only the last row has a border */
}
.input-icon {
width: 15px;
height: 15px;
margin: 0 10px;
}
label {
max-width:4em; /* Or the maximum width you want your lebel to be */
min-width:4em; /* Same */
color:white;
font-weight: 100;
}
input {
border:none;
padding: 0.8em 0.5em;
color: #6691c9;
font-size: 15px;
outline: none; /* No glowing borders on chrome */
}
<form>
<div class="form-row">
<!-- Put your image here, like so -->
<img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
<label for="form-email">Email</label>
<input id="form-email" type="email">
</div>
<div class="form-row">
<img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
<label for="form-password">Password</label>
<input id="form-password"type="password" placeholder="(8 characters min)">
</div>
<div class="form-row">
<img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
<label for="form-user">User</label>
<input id="form-user" type="text"><br>
</div>
</form>
If you're feeling adventurous
Try bootstrap, it has all you need to create cool web sites (it also includes the font-awesome library).
please have a look at this simple jsfiddle:
--> JSFiddle
html:
<form>
<p>
<input id="I1" value="above left" size="40" />
<input id="I2" value="above right" size="10" />
</p>
<p>
<input id="I3" value="below right" size="10" />
<input id="I4" value="below left" size="20" />
</p>
</form>
css:
form {
overflow: hidden;
border: 3px solid red;
padding: 5px;
}
#I1,
#I2 {
background-color: orange;
float: left;
}
#I3,
#I4 {
background-color: yellow;
float: right;
}
what I want is the red border (= form width) auto-adjust to the width of the two top inputs (+ padding, of course).
I would then expect, that the second line inputs appear right-aligned below the first, so "above right" would be exactly above "below right", and "below left" beeing right left of it, like so:
11111111111111111111 2222222
4444444 3333333
Can this be done without tables?
Thx, Armin.
It most certainly can be done without tables :). You could set, for form:
form {
display: inline-block;
padding: ...;
}
This will prevent the form from expanding to the entire width of the screen. It will be as wide as the elements inside it, or, if you manually define its width, as wide as specified.
If you would like no elements to appear on either side of the form within the form's containing element, you can wrap it in a div or other block level element:
<div>
<form>
<!-- Rest of content -->
</form>
</div>
In order to remove the spacing above and below each p, as per your comment, remove their margin-top and margin-bottom, as they have a margin by default:
p {
margin-bottom: 0;
margin-top: 0;
}
I've organized and cleaned-up your code. The way to make the div adjust to its content is by using display: inline-block. I've also fixed the padding issue so now the entire content is padded equally to 5px.
JsFiddle
HTML:
<form>
<p>
<input id="I1" value="above left" size="40" />
<input id="I2" value="above right" size="10" />
</p>
<p>
<input id="I3" value="below right" size="10" />
<input id="I4" value="below left" size="20" />
</p>
</form>
CSS:
.border {
border: 3px solid red;
padding: 5px;
display: inline-block;
}
#I1 {
background-color: orange;
}
#I2 {
background-color: yellow;
}
.top-block,
.bottom-block {
width: 100%;
}
I have update this answer. Probably this is what you need, but there are other options but I don't think is the scope of this question.
CSS Code:
form {
overflow: hidden;
border: 3px solid red;
padding: 5px;
width: 400px; // limites de form size
}
#I1,
#I2 {
position: absolute;
background-color: orange;
}
#I3,
#I4 {
position: absolute;
background-color: yellow;
}
p {
display: block;
border: 1px solid blue;
position: relative;
height: 2em;
}
#I1,
#I4 {
right: 25%;
}
#I2,
#I3 {
right: 0;
}
See here the full code: https://jsfiddle.net/uv8yrrav/18/
hope this helps!
I have the following fiddle consisting of this html markup and CSS:
.embers-info{
margin-top: 30px;
border: 1px solid black;
width: 600px;
padding: 20px 0px 30px 0px;
}
.embers-total{
width: 80px;
}
.embers-email{
margin-left: 20px;
}
.embers-phone{
margin: 10px 0px 0px 20px;
}
.embers-notes{
margin: 20px 0px 0px 20px;
}
.embers-pickup{
margin-left: 20px;
}
.embers-actions{
margin-left: 20px;
margin-top: 20px;
}
.af-commerce{
float: right;
}
.embers-checkout-header{
padding: 3px 10px 12px 5px;
}
.embers-user-info{
width: 300px;
border: 4px solid blue;
padding-bottom: 50px;
}
.embers-delivery-info{
width: 300px;
border: 4px solid red;
padding-bottom: 50px;
}
<div class='embers-info'>
<div class='embers-user-info'>
<div class='embers-email'>
email:<br />
<input type="text" size="30" name="email" id="email" />
</div>
<div class='embers-phone'>
phone number:<br />
<input type="text" size="30" name="phone_number" id="phone_number" />
</div>
<div class='embers-notes'>
notes:<br />
<textarea id='notes' cols='30' rows='5'></textarea>
</div>
<div class='embers-pickup'>
<br />pickup times:<br />
November 21 10am:<input type="radio" size="30" class="pickup" name="pickup" value="time1" /> <br />
November 21 noon:<input type="radio" size="30" class="pickup" name="pickup" value="time2" /><br />
November 21 2pm:<input type="radio" size="30" class="pickup" name="pickup" value="time3" /><br />
November 21 4pm:<input type="radio" size="30" class="pickup" name="pickup" value="time4" /><br />
November 22 8am:<input type="radio" size="30" class="pickup" name="pickup" value="time4" /><br />
</div>
<div class='embers-actions'>
<button id='save_order'>save order</button>
<button id="customButton">Purchase</button>
</div>
</div>
<div class='embers-delivery-info'>
here i am
</div>
</div>
and would like to get the blue and red div side-by-side. How would I do this?
I tried to use:
display:inline-block;
but that didn't matter.
Someone has mentioned flexbox, which while a perfectly valid solution may not be what you need depending on your minimum browser requirements as flexbox is still not as well supported as one would like. When aligning elements side by side using traditional methods you have a couple of options, display: inline-block and float.
display: inline-block : http://jsfiddle.net/bzkt2hcx/2/
.embers-info {
display: inline-block;
}
.embers-info > div {
display: inline-block;
vertical-align: top;
}
Notes:
inline-block elements may be rendered with spacing on some browsers, most notably chrome. To fix this set we can set font-size: 0 on the parent container and then reset the font-size on the children.
float: left/right: http://jsfiddle.net/bzkt2hcx/3/
.embers-info {
overflow: auto;
}
.embers-info > div {
float: left;
}
Notes: floated elements are taken out of the flow and do not affect their parents heights, causing sizing and layout issues. To alleviate this we need to apply a clearfix on the parent, the simplest of which is setting overflow: auto on the parent container.
You could use flexbox by adding display: flex to the containing div. This will default in a flex-direction of row, which will put them next to each other:
http://jsfiddle.net/bzkt2hcx/1/
More reading for laying out the children in a flexbox container:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
Please bare in mind that I am new to code!
So I have a header and some text, that I am wanting to place on top of a background image that i have input using CSS, therefore the positioning is key.
It was all working fine, until i added more HTML content under neither the text. From this it was just as if the text wasn't picking up my CSS instructions.
HTML:
<div id="sidemicro">
<text class="circleheader"><h3>Special Occasion?</h3><p>Give us a call and </br> we'll see how we can make </br> your tour extra special!</p></br>
This is the text i need to format:
<div id="form">
<form action ='otterabout.php' method='POST'>
*Your Name: <input type='text' name='name'><br />
*Your Email: <input type'text' name='email'><br />
*Date of visit: <input type'date' name='date'><br />
*Time of visit: <input type'time' name='time'><br />
*Group Size: <input type'text' name='groupsize'><br />
<input type='submit' name='submit' value='Login'>
<input name='reset' type='reset' value='Reset'>
</form>
</div>
</div>
This is the content under the text which has stopped it formatting.
CSS:
.circleheader {
margin-top:70%;
margin-left:15%;
}
.circletext {
text-align:center;
margin-left:35%;
}
Thanks!
Is this the type of formatting you're looking for? FIDDLE.
CSS
.sidemicro {
margin-left: 10px;
width: 600px;
border: 1px solid black;
background: url('https://res.cloudinary.com/roadtrippers/image/upload/v1396514626/p2nmpjpgjsm8iihdh5ip.jpg');
background-size: 600px;
background-repeat: no-repeat;
}
.circleheader {
width: 200px;
border: 0px solid black;
margin: 10px auto;
color: white;
background-color: rgba(0, 0, 0, 0.4);
text-align: center;
}