I am trying to have some pre-input on my forms and I want the input field to expand to the end of the container div. The problem is the input field seems to expand past the container div due to the length of the pre-input text.
.container {
width: 70%;
}
.input-field {
display: inline-block;
white-space: nowrap;
vertical-align: bottom;
background: #fff;
position: relative;
vertical-align: middle;
width: 100%;
min-width: 16px;
border: 1px solid #ddd;
}
.input-field .addon {
padding-left: 8px;
padding-right: 8px;
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background: #f0f0f0;
}
.input-field input {
padding-left: 5px;
padding-top: 0;
padding-bottom: 0;
margin: 0;
border: 0;
outline: none;
background: transparent;
resize: none;
width: 100%;
}
.input-field:hover {
border: 1px solid #05c9f0;
}
<div class="container">
<div class="input-field">
<span class="addon">some preinput</span>
<input id="" type="text" name="" value="test text" />
</div>
</div>
Another example here: http://codepen.io/anon/pen/wgdErO
If you try the example code, you will note you can click the input box way outside where I want it to end.
Any thoughts on a fix?
Try using the flexbox layout.
.container {
width: 300px;
}
.input-field {
background: #fff;
border: 1px solid #ddd;
display: flex;
align-items: center;
}
.input-field .addon {
padding: 2px 8px;
text-shadow: 0 1px 0 #fff;
background: #f0f0f0;
}
.input-field input {
padding: 0 4px;
margin: 0;
border: 0;
outline: none;
background: transparent;
resize: none;
flex: 1;
}
.input-field:hover {
border: 1px solid #05c9f0;
}
<div class="container">
<div class="input-field">
<span class="addon">some preinput</span>
<input id="" type="text" name="" value="test text" />
</div>
</div>
<img src="//dummyimage.com/300x50">
Just decrease the input width from 100% to a lower value like 99.7% and that will do the trick:
.container {
width: 70%;
border: 1px solid red;
}
.input-field {
display: inline-block;
white-space: nowrap;
vertical-align: bottom;
background: #fff;
position: relative;
vertical-align: middle;
width: 99.7%;
min-width: 16px;
border: 1px solid #ddd;
}
.input-field .addon {
padding-left: 8px;
padding-right: 8px;
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background: #f0f0f0;
}
.input-field input {
padding-left: 5px;
padding-top: 0;
padding-bottom: 0;
margin: 0;
border: 0;
outline: none;
background: transparent;
resize: none;
width: 100%;
}
.input-field:hover {border: 1px solid #05c9f0;}
<div class="container">
<div class="input-field">
<span class="addon">some preinput</span>
<input id="" type="text" name="" value="test text" />
</div>
</div>
You can calculate the width like this! width: calc(100% - 125px); rather than set it to 100%
Related
How do I adjust the text input position in the input box? I did do input[type=text] but it messes up my input box's position completely. I did change my ::placeholder left margin a little bit in case if you want to know.
HTML & CSS
.registerbox {
width: 500px;
height: 450px;
background: rgba(255, 255, 255, 0.7);
margin: 10px auto;
border-radius: 20px;
box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.6);
color: white;
}
.inner-registerbox {
position: relative;
width: 100%;
height: 100%;
}
.registerbox-front {
position: absolute;
height: 100%;
width: 100%;
padding: 55px;
box-sizing: border-box;
border-radius: 14px;
}
input label {
display: block;
}
.registerbox h2 {
text-align: center;
font-size: 25px;
font-weight: normal;
margin-bottom: 20px;
margin-top: 0;
color: black;
}
.input-box2 {
width: 95%;
background: transparent;
border: 1px solid black;
height: 32px;
border-radius: 5px;
padding: 0 0px;
box-sizing: border-box;
outline: none;
text-align: left;
color: black;
display: table;
margin-top: 2px;
margin-bottom: 15px;
}
.input-box3 {
width: 105%;
background: transparent;
border: 1px solid black;
height: 32px;
border-radius: 5px;
padding: 0 0px;
box-sizing: border-box;
outline: none;
text-align: left;
color: black;
display: table;
margin-top: 2px;
margin-bottom: 15px;
}
.registerbox-front ::placeholder {
padding-left: 10px;
}
.box-firstline, .box-secondline {
margin-top: 10px
}
<body>
<div class="registerbox">
<div class="inner-registerbox">
<div class="registerbox-front">
<h2>BORANG PENDAFTARAN MURID</h2>
<form>
<section>
<div class="box-firstline">
<div style="float:left;margin-right:25px;">
<label for="idmurid">ID Murid</label> <br />
<input type="text" name="idmurid" class="input-box2" placeholder="ID Murid" required>
</div>
<div style="float:left;">
<label for="namamurid">Nama Murid</label> <br />
<input type="text" name="namamurid" class="input-box3" placeholder="Nama Murid" required>
</div>
</div>
<br style="clear:both;" />
</section>
<div class="box-secondline">
<div style="float:left;margin-right:25px;">
<label for="namakelas">Nama Kelas</label> <br />
<input type="text" name="namakelas" class="input-box2" placeholder="Nama Kelas" required>
</div>
<div style="float:left;">
<label for="katalaluan_murid">Kata Laluan</label> <br />
<input type="password" name="katalaluan_murid" class="input-box3" placeholder="Katalaluan" required>
</div>
<br style="clear:both;" />
</div>
</div>
</div>
</body>
I took the code you posted, removed the ::placeholder padding and then added
input[type="text"] {
padding-left: 10px;
}
input[type="password"] {
padding-left: 10px;
}
And it adjusted the the text to match the placeholder.
Here is the full CSS:
.registerbox {
width: 500px;
height: 450px;
background: rgba(255, 255, 255, 0.7);
margin: 10px auto;
border-radius: 20px;
box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.6);
color: white;
}
input[type="text"] {
padding-left: 10px;
}
input[type="password"] {
padding-left: 10px;
}
.inner-registerbox {
position: relative;
width: 100%;
height: 100%;
}
.registerbox-front {
position: absolute;
height: 100%;
width: 100%;
padding: 55px;
box-sizing: border-box;
border-radius: 14px;
}
input label {
display: block;
}
.registerbox h2 {
text-align: center;
font-size: 25px;
font-weight: normal;
margin-bottom: 20px;
margin-top: 0;
color: black;
}
.input-box2 {
width: 95%;
background: transparent;
border: 1px solid black;
height: 32px;
border-radius: 5px;
padding: 0 0px;
box-sizing: border-box;
outline: none;
text-align: left;
color: black;
display: table;
margin-top: 2px;
margin-bottom: 15px;
}
.input-box3 {
width: 105%;
background: transparent;
border: 1px solid black;
height: 32px;
border-radius: 5px;
padding: 0 0px;
box-sizing: border-box;
outline: none;
text-align: left;
color: black;
display: table;
margin-top: 2px;
margin-bottom: 15px;
}
.box-firstline, .box-secondline {
margin-top: 10px;
}
I'm attempting to make a login page for a website, https://essaydapp.com to submit and try and get into the application. I'm trying to mimic their design (see link) but I'm having some issues:
Screenshots:
https://imgur.com/w2GAphF
https://imgur.com/rimWY0s
In the first screenshot you can see the little 1px dashed border, I would like that to be the height of the entire page rather than the form only.
In the second screenshot you can see on the edges of the page and top there is the white color, but I would like that to be blue too. Thanks for any help in advance.
form {
/*border: 10px solid #1acebc;*/
padding: 28px;
border-left: 1px solid black;
border-left-style: dashed;
border-right: 1px solid black;
border-right-style: dashed;
}
button:hover {
opacity: 0.8;
}
button {
background-color: #09c;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
input[type=text],
input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #1acebc;
box-sizing: border-box;
}
img {
display: block;
margin: 0 auto;
padding-bottom: 60px;
padding-top: 30px;
width: 300px;
height: 300px;
}
body {
background-color: #e7f3f6;
/*border-left: 250px solid #007da5;
border-right: 250px solid #007da5;*/
border-left: 175px solid #007da5;
border-right: 175px solid #007da5;
padding-top: 175px;
padding-bottom: 215px;
}
<form>
<img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png" alt="profilepicture">
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="button" name="Login">Login</button>
</form>
This code removes any padding from left and right.
I hope that's what you want.
body{
border: 1px dashed;
backgroud-color: #e7f3f6;
margin-left: 0px;
margin-right: 0px;
}
Your existing code is somewhat messy. Instead, I suggest to use the following flex-box solution
body {
padding: 0;
margin: 0 auto;
background-color: #007da5;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
form {
display: flex;
width: 75%; /*Set the width required*/
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #e7f3f6;
border-left: 1px dashed black;
border-right: 1px dashed black;
}
img {
width: 300px;
height: 300px;
padding-bottom: 60px;
padding-top: 30px;
}
button:hover {
opacity: 0.8;
}
button {
background-color: #09c;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 85%;
}
input[type=text],
input[type=password] {
width: 85%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #1acebc;
box-sizing: border-box;
}
<form>
<img src="https://i.imgur.com/ihZBCxx.png" alt="profilepicture">
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="button" name="Login">Login</button>
</form>
I tried to resize my <fieldset> element, but it automatically made its contents smaller. Then, I added display:inline-block in my CSS file (as suggested by many answers on a similar topic). However, this doesn't help at all, everything stays the same. What should I do? I'd like a noob-friendly solution, since I'm not that good at CSS, as you may have noticed. Cheers!
fieldset {
display: inline-block;
border: 1px solid blue;
background-color: white;
width: 40%;
}
legend {
display: inline-block;
padding: 4px 8px;
border: 1px solid blue;
font-size: 15px;
color: white;
background-color: blue;
text-align: left;
}
label {
width: 100px;
margin-right: 30px;
display: inline-block;
text-align: left;
}
input[type=text] {
width: 25%;
padding: 10px 20px;
margin: 0px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
<fieldset>
<legend>XXX</legend>
<label for="username">Username:</label>
<input type="text" name="username">
</fieldset>
If you use percentage on the content's width, it will will change according to the width of the container(fieldset).
Just remove the percentage value.
fieldset {
display: inline-block;
border: 1px solid blue;
background-color: white;
}
legend {
display: inline-block;
padding: 4px 8px;
border: 1px solid blue;
font-size: 15px;
color: white;
background-color: blue;
text-align: left;
}
label {
width: 100px;
display: inline-block;
text-align: left;
}
input[type=text] {
padding: 10px 20px;
margin: 0px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
<fieldset>
<legend>XXX</legend>
<label for="username">Username:</label>
<input type="text" name="username">
</fieldset>
What i am doing is that in search box when user enter a search term, i display a close button ('x' character to be specific, embedded as content after reset button) to clear the contents of search box.
It works fine in both Chrome and IE but not in firefox.
Any kind of help would be highly appreciated.
.search-box,.close-icon,.search-wrapper {
position: relative;
padding: 10px;
}
.search-wrapper {
width: 500px;
margin: auto;
margin-top: 50px;
}
.search-box:focus {
box-shadow: 0 0 15px 5px #b0e0ee;
border: 2px solid #bebede;
}
.close-icon {
border:1px solid transparent;
background-color: transparent;
display: inline-block;
vertical-align: middle;
outline: 0;
cursor: pointer;
}
.close-icon:after {
content: "X";
display: block;
width: 15px;
height: 15px;
position: absolute;
z-index:1;
right: 35px;
top: 0;
bottom: 0;
margin: auto;
padding: 2px;
border-radius: 50%;
text-align: center;
color: black;
font-weight: normal;
font-size: 12px;
cursor: pointer;
}
.search-box:not(:valid) ~ .close-icon {
display: none;
}
<div class="search-wrapper">
<form>
<input type="text" name="focus" required class="search-box" placeholder="Enter search term" />
<button class="close-icon" type="reset"></button>
</form>
</div>
This code should help you
.search-box,.search-wrapper {
position: relative;
padding: 10px;
}
.search-wrapper {
width: 500px;
margin: auto;
margin-top: 50px;
}
.search-box
{
width:300px;
}
.search-box:focus {
box-shadow: 0 0 15px 5px #b0e0ee;
border: 2px solid #bebede;
}
.close-icon {
border:1px solid transparent;
background-color: transparent,
display: inline-block;
vertical-align: middle;
outline: 0;
position: absolute;
top:19px;
left:305px;
z-index:1;
padding: 1px 2px;
border-radius: 50%;
text-align: center;
color: black;
font-weight: normal;
font-size: 12px;
cursor: pointer;
}
.search-box:not(:valid) ~ .close-icon {
display: none;
}
<div class="search-wrapper">
<form>
<input type="text" name="focus" required class="search-box" placeholder="Enter search term" />
<button class="close-icon" type="reset">X</button>
</form>
</div>
NOTE : set your .search-box width and according to it set left of your .close-icon
Try this code: Hope this solve your problem. Adjust "outer_box" class for width.
<style>
.search-box, .search-wrapper {
padding: 10px;
box-sizing: border-box;
}
.search-box {
position:relative;
width:100%;
}
.outer_boxs{
position:relative;
width:60%;
}
.search-wrapper {
width: 500px;
margin: auto;
margin-top: 50px;
}
.search-box:focus {
box-shadow: 0 0 15px 5px #b0e0ee;
border: 2px solid #bebede;
}
.close-icon {
border:1px solid transparent;
background-color: transparent,
display: inline-block;
vertical-align: middle;
outline: 0;
cursor: pointer;
position: absolute;
right:5px;
top: 10px;
background:#f2f2f2;
}
.search-box:not(:valid) ~ .close-icon {
display: none;
}
</style>
<div class="search-wrapper">
<form>
<div class="outer_boxs" >
<input type="text" name="focus" required class="search-box" placeholder="Enter search term" />
<button class="close-icon" type="reset">X</button>
</div>
</form>
</div>
I want to create something like the picture, where the #body is between #leg1 and #leg2, three of them should be horizontally in line to the bottom. Any idea how to achieve this? I tweaked some property such as display:inline, or float:left, float:right, but none of them work as I expect.
.comment_leg {
s width: 60px;
/*height:18px;*/
background-color: #ffcc99;
padding: 5px;
text-align: center;
border-radius: 3px;
}
[contenteditable=true]:empty:before {
content: attr(placeholder);
display: block;
For Firefox
}
#body {
background-color: white;
/*position:relative;*/
border: 1px solid orange;
/*height:60px;*/
width: 500px;
padding: 10px;
color: black;
border-radius: 3px;
font-size: 18px;
/*border-color:yellow;*/
}
#body:focus {
outline-style: solid;
outline-color: orange;
outline-width: 0px;
}
<br>
<br>
<br>
<div class="comment_leg">leg1</div>
<div id="body" contenteditable="true" autocomplete="off" spellcheck="false" placeholder="Pika pi?"></div>
<div class="comment_leg">leg2</div>
From what I understood of your "凸" shape I guess this is what you want:
NOTE: You can adjust height and width depending on your preference.
.comment_leg {
width: 60px;
/*height:18px;*/
background-color: #ffcc99;
padding: 5px;
text-align: center;
border-radius: 3px;
vertical-align: bottom;
display: inline-block;
}
[contenteditable=true]:empty:before {
content: attr(placeholder);
display: block;
For Firefox
}
#body {
background-color: white;
border: 1px solid orange;
min-height:100px;
width: 150px;
padding: 10px;
color: black;
border-radius: 3px;
font-size: 18px;
display: inline-block;
vertical-align: bottom;
}
#body:focus {
outline-style: solid;
outline-color: orange;
outline-width: 0px;
}
<div class="comment_leg">leg1</div>
<div id="body" contenteditable="true" autocomplete="off" spellcheck="false" placeholder="Pika pi?"></div>
<div class="comment_leg">leg2</div>