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;
}
Related
I'm a new to css and i really can't fix all as i want...
How can i align vertical the h1 to the start of user form?
but most important problem for me is that i can't center good the check and the link, i want it one below the other and centered in the div.
I'm not sure if i have positioned good the div but i want it centred but not too low on the page.
thanks to everyone!
body {
text-align: left;
background-image: url("img/lemon.jpg");
color: #1b1b1b;
}
input[type=text],
input[type=password]{
width: 65%;
display: table;
margin: 0 auto;
padding: 12px 20px;
border: none;
border-bottom: 1px solid darkgray;
background-color: #e9e9e9;
box-sizing: border-box;
margin-bottom: 7px;
resize: vertical;
}
h1 {
font-size: x-large;
}
h2 {
font-size: x-large;
}
button {
background-color: #4CAF50;
color: white;
padding: 7px 20px;
width: 65%;
height: 20%;
display: table;
margin: 0 auto;
border: none;
cursor: pointer;
background: linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
background-color: #3d94f6;
border: 1px solid #337fed;
cursor: pointer;
color: #ffffff;
font-size: 17px;
text-decoration: none;
text-shadow: -1px 1px 1px #1570cd;
}
button:hover {
background: linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
background-color: #1e62d0;
}
button:active {
position: relative;
top: 1px;
}
.container {
width: 35%;
height: auto;
margin-right: auto;
margin-left: auto;
margin-top: 7%;
background-color: white;
box-shadow: 2px 2px 11px rgb(11, 11, 11);
-webkit-box-shadow: 2px 2px 11px rgb(11, 11, 11);
-moz-box-shadow: 2px 2px 11px rgb(11, 11, 11);
overflow: hidden;
}
#check {
display:block;
margin-top: 7px;
}
span.frgt {
margin-top: 7px;
display: block;
}
a {
text-decoration: none;
color: #1e62d0;
}
img {
width: 100%;
height: auto;
opacity: 0.4;
}
<!DOCTYPE html>
<head>
</head>
<body>
<div class="container">
<h1>Login</h1>
<input type="text" placeholder="Username" name="uname" required>
<input type="password" placeholder="password" name="psw" required>
<button type="submit">Login</button>
<hr>
<label id="check">
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
<span class="frgt">forgot password?</span>
</div>
</body>
</html>
If you set the h1 to the same width of the button and use "margin: 0 auto" to center it, this will make the h1 span the width of the button, and by default the text will be left aligned to the start of the button.
h1 {
font-size: x-large;
width: 65%;
margin: 0 auto;
}
I'm not too sure exactly what you want to do with the check section. If you use "text-align: center", this will center it, or use the same code as above to align it with the buttons.
you can use text-align: center; and vertical-align:top;
If your problem still exists, please explain more clearly what you want.
Use text-align: center; to center text within container.
To make it easier to align your elements, just wrap them into one div and adjust the div with CSS instead of dealing with each single element.
Here is an example of what you can do.
body {
text-align: left;
background-image: url("img/lemon.jpg");
color: #1b1b1b;
}
.form {
width: 75%;
margin: auto;
}
.form-bottom {
text-align: center;
}
input[type=text],
input[type=password] {
display: table;
margin: 0 auto;
width: 100%;
padding: 12px 20px;
border: none;
border-bottom: 1px solid darkgray;
background-color: #e9e9e9;
box-sizing: border-box;
margin-bottom: 7px;
resize: vertical;
}
h1 {
font-size: x-large;
}
h2 {
font-size: x-large;
}
button {
background-color: #4CAF50;
color: white;
padding: 7px 20px;
height: 20%;
width: 100%;
display: table;
margin: 0 auto;
border: none;
cursor: pointer;
background: linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
background-color: #3d94f6;
border: 1px solid #337fed;
cursor: pointer;
color: #ffffff;
font-size: 17px;
text-decoration: none;
text-shadow: -1px 1px 1px #1570cd;
}
button:hover {
background: linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
background-color: #1e62d0;
}
button:active {
position: relative;
top: 1px;
}
.container {
width: 35%;
height: auto;
margin-right: auto;
margin-left: auto;
margin-top: 7%;
background-color: white;
box-shadow: 2px 2px 11px rgb(11, 11, 11);
-webkit-box-shadow: 2px 2px 11px rgb(11, 11, 11);
-moz-box-shadow: 2px 2px 11px rgb(11, 11, 11);
overflow: hidden;
}
#check {
display: block;
margin-top: 7px;
}
span.frgt {
margin-top: 7px;
display: block;
}
a {
text-decoration: none;
color: #1e62d0;
}
img {
width: 100%;
height: auto;
opacity: 0.4;
}
<body>
<div class="container">
<div class="form">
<h1>Login</h1>
<input type="text" placeholder="Username" name="uname" required>
<input type="password" placeholder="password" name="psw" required>
<button type="submit">Login</button>
</div>
<hr>
<div class="form-bottom">
<label id="check">
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
<span class="frgt">forgot password?</span>
</div>
</div>
</body>
I'm trying to make a small web page with a search bar and an accounts menu (currently just a circle), but I've noticed, when I zoom in, or resize the page, the accounts menu overflows onto the search bar. I've tried changing from absolute positioning, to relative and adjusting the right: 30px accordingly, but this didn't work. I'm incredibly stuck, can anyone offer any advice/code?
body {
font-family: "PT-Sans", sans-serif;
background-color: #bbb;
}
input:focus {
outline: none;
}
.search-btn {
border: none;
padding: 12px;
font-size: 18px;
background-color: #009AFF;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
color: white;
width: 70px;
position: relative;
right: 5px;
cursor: pointer;
}
.input {
width: 500px;
padding: 11px;
font-size: 18px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: 1px solid #777;
}
.search {
width: 600px;
position: absolute;
left: 200px;
top: 15px;
}
.logo a {
color: #009AFF;
font-size: 38px;
text-decoration: none;
}
.logo {
position: absolute;
left: 0;
top: 12px;
width: 200px;
}
.content {
width: 300px;
border: 2px solid #eee;
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
top: 65px;
padding: 5px;
}
#account-items {
display: none;
background-color: #fff;
width: 300px;
border: 2px solid #eee;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: absolute;
right: 0px;
top: 72px;
padding: 5px;
}
/*.accounts:hover #account-items {
display: inline;
}*/
#account-items a {
color: #009AFF;
text-decoration: none;
display: block;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
}
#account-items a:hover {
background-color: #eee;
}
.accounts {
cursor: pointer;
position: absolute;
right: 30px;
width: 66px;
height: 66px;
top: 4px;
padding: 0px;
border-radius: 100%;
}
.accounts .image {
background-image: url("/email/scripts/profile.png");
background-size: 100%;
background-repeat: no-repeat;
border: 1px solid #777;
border-radius: 100%;
width: 63px;
height: 63px;
}
a {
color: #009AFF;
text-decoration: none;
}
.js-is-hidden {
display: none;
}
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="body">
<div class="header">
<div class="logo">
<center>Unnamed</center>
</div>
<div class="search">
<form action="search.php" method="GET">
<input type="text" name="q" class="input" autocomplete="off" />
<button type="submit" class="search-btn">Go</button>
</form>
</div>
<div class="accounts">
<div class="image">
</div>
</div>
</div>
</div>
If you remove the absolute positioning and stick with the default relative, then use a display of inline-block (Read up on what it does here: https://www.w3schools.com/css/css_inline-block.asp) and use dynamic widths instead of static ones, you should get your desired result.
See the updated code below;
body {
font-family: "PT-Sans", sans-serif;
background-color: #bbb;
}
input:focus {
outline: none;
}
.search-btn {
border: none;
padding: 12px;
font-size: 18px;
background-color: #009AFF;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
color: white;
width: 70px;
position: relative;
right: 5px;
cursor: pointer;
}
.input {
width: calc(100% - 100px); /* CHANGED */
padding: 11px;
font-size: 18px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: 1px solid #777;
}
.search {
max-width: 600px; /* CHANGED */
width: calc(100% - 300px); /* ADDED */
/* position: absolute; REMOVED */
/* left: 200px; REMOVED */
/*top: 15px; REMOVED */
display: inline-block; /* ADDED */
vertical-align: middle; /* ADDED */
}
.logo a {
color: #009AFF;
font-size: 38px;
text-decoration: none;
}
.logo {
/*position: absolute; //REMOVED */
/*left: 0; //REMOVED */
display: inline-block; /* ADDED */
vertical-align: middle; /* ADDED */
top: 12px;
width: 200px;
}
.content {
width: 300px;
border: 2px solid #eee;
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
top: 65px;
padding: 5px;
}
#account-items {
display: none;
background-color: #fff;
width: 300px;
border: 2px solid #eee;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: absolute;
right: 0px;
top: 72px;
padding: 5px;
}
/*.accounts:hover #account-items {
display: inline;
}*/
#account-items a {
color: #009AFF;
text-decoration: none;
display: block;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
}
#account-items a:hover {
background-color: #eee;
}
.accounts {
cursor: pointer;
/* position: absolute; REMOVED */
/* right: 30px; REMOVED */
width: calc(100% - 809px); /* CHANGED */
height: 66px;
/* top: 4px; REMOVED */
padding: 0px;
border-radius: 100%;
display: inline-block; /* ADDED */
vertical-align: middle; /* ADDED */
text-align: right; /* ADDED */
}
.accounts .image {
background-image: url("/email/scripts/profile.png");
background-size: 100%;
background-repeat: no-repeat;
border: 1px solid #777;
border-radius: 100%;
width: 63px;
height: 63px;
display: inline-block; /* ADDED */
}
a {
color: #009AFF;
text-decoration: none;
}
.js-is-hidden {
display: none;
}
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="body">
<div class="header">
<div class="logo">
<center>Unnamed</center>
</div>
<div class="search">
<form action="search.php" method="GET">
<input type="text" name="q" class="input" autocomplete="off" />
<button type="submit" class="search-btn">Go</button>
</form>
</div>
<div class="accounts">
<div class="image">
</div>
</div>
</div>
</div>
try this
.header {
position: relative;
min-width: 900px;
}
https://jsfiddle.net/59ncte3m/1/
It will avoid the issue where your menu gets drawn on top of the search by making the header a positioned element, the menu absolute position will be relative to the header. giving it a min-width will make sure all elements fit within.
This is still not a good responsive design, as it should avoid pixel dimentions, but it is enough to fix the overflowing issue.
I'm doing some mvc testing and I've hit a roadblock when I'm going through my model to display some elements. Each element will have to have an "EXP" amount that is displayed dynamically in the ::after element in the css.
Is there a way to dynamically change the width of the ::after element? I am passing through the width for each element through the model but I don't display it yet
That's the bar that needs to change dynamically, here's an example piece of code of how I've done it so far:
.pkmn-pc {
color: white;
margin: 10px;
display: inline-block;
}
.pkmn-summary, .pkmn-info {
display: table-cell;
vertical-align: middle;
height: 60px;
}
.pkmn-summary {
width: 193px;
background: #745fb5;
background: linear-gradient(15deg, #745fb5, #9a6dbb);
border-radius: 5px 0 0 5px;
box-shadow: 0 1px 1px rgba(102, 119, 136, 0.55);
white-space: nowrap;
border-bottom: solid 5px grey;
text-align: left;
padding-left: 5px;
}
.pkmn-summary:after {
content: '';
position: relative;
left: -181px;
bottom: -31px;
height: 5px;
background: green;
width: 73%;
display: inline-block;
border-radius: 0 0 0 5px;
}
.pkmn-info {
background: #333538;
border-radius: 0 5px 5px 0;
width: 70px;
text-align: center;
box-shadow: 0 1px 1px rgba(102, 119, 136, 0.55);
}
.pkmn-outer {
padding-bottom: 2px;
}
.pkmn-inner {
display: inline-block;
width: 3px;
}
.pkmn-sprite {
vertical-align: middle;
}
.pkmn-name {
font-size: 1.2em;
}
.pkmn-lvl {
font-size: 0.8em;
display: block;
}
.crown {
padding-top: 5px;
}
code {
padding: 0;
font-size: 1em;
color: white;
background-color: transparent;
border-radius: 0;
}
<div class="pkmn-pc">
<div class="pkmn-summary">
<img class="pkmn-sprite" src="https://cdn.bulbagarden.net/upload/e/ea/113MS.png" />
<code class="pkmn-name">15Characterssss</code>
</div>
<div class="pkmn-info">
<img class="crown" src="https://cdn.bulbagarden.net/upload/c/c5/Leaf_Crown_Sprite.png" />
<div class="pkmn-outer">
<img class="heart" src="https://image.ibb.co/kB8vi6/heart.png">
<div class="pkmn-inner"></div>
<img class="star" src="https://image.ibb.co/e7w4bR/Shiny_VIStar.png">
</div>
<code class="pkmn-lvl">lvl 100</code>
</div>
</div>
Any help would be greatly appreciated! Thanks!
If you have the EXP value available in the data (along with the other user info), you could create an element (we'll call it .pkmn-exp) and set the experience level (or width) in an inline style.
For example, if the user has an experience level of 73/100:
<div class="pkmn-exp" style="width:73%;"></div>
where the 73 comes from the user's data.
.pkmn-pc {
color: white;
margin: 10px;
display: inline-block;
}
.pkmn-summary,
.pkmn-info {
display: table-cell;
vertical-align: middle;
height: 60px;
}
.pkmn-summary {
position: relative;
width: 193px;
background: #745fb5;
background: linear-gradient(15deg, #745fb5, #9a6dbb);
border-radius: 5px 0 0 5px;
box-shadow: 0 1px 1px rgba(102, 119, 136, 0.55);
white-space: nowrap;
border-bottom: solid 5px grey;
text-align: left;
padding-left: 5px;
}
.pkmn-exp {
position: absolute;
left: 0px;
bottom: -5px;
height: 5px;
background: green;
display: inline-block;
border-radius: 0 0 0 5px;
}
.pkmn-info {
background: #333538;
border-radius: 0 5px 5px 0;
width: 70px;
text-align: center;
box-shadow: 0 1px 1px rgba(102, 119, 136, 0.55);
}
.pkmn-outer {
padding-bottom: 2px;
}
.pkmn-inner {
display: inline-block;
width: 3px;
}
.pkmn-sprite {
vertical-align: middle;
}
.pkmn-name {
font-size: 1.2em;
}
.pkmn-lvl {
font-size: 0.8em;
display: block;
}
.crown {
padding-top: 5px;
}
code {
padding: 0;
font-size: 1em;
color: white;
background-color: transparent;
border-radius: 0;
}
<div class="pkmn-pc">
<div class="pkmn-summary">
<img class="pkmn-sprite" src="https://cdn.bulbagarden.net/upload/e/ea/113MS.png" />
<code class="pkmn-name">15Characterssss</code>
<div class="pkmn-exp" style="width:73%"></div>
</div>
<div class="pkmn-info">
<img class="crown" src="https://cdn.bulbagarden.net/upload/c/c5/Leaf_Crown_Sprite.png" />
<div class="pkmn-outer">
<img class="heart" src="https://image.ibb.co/kB8vi6/heart.png">
<div class="pkmn-inner"></div>
<img class="star" src="https://image.ibb.co/e7w4bR/Shiny_VIStar.png">
</div>
<code class="pkmn-lvl">lvl 100</code>
</div>
</div>
Unfortunately you cannot script the ::after elements as they are not part of the dom.
You could either
Use a set of predefined classes and apply them to parent
add a bar element and script it like
var p = 0;
var bar = document.querySelector(".pkmn-bar");
window.setInterval(function() {
bar.style.width=p+"%";
p++;
if(p>100) p=0;
},50);
.pkmn-pc {
color: white;
margin: 10px;
display: inline-block;
}
.pkmn-summary, .pkmn-info {
display: table-cell;
vertical-align: middle;
height: 60px;
}
.pkmn-summary {
width: 193px;
background: #745fb5;
background: linear-gradient(15deg, #745fb5, #9a6dbb);
border-radius: 5px 0 0 5px;
box-shadow: 0 1px 1px rgba(102, 119, 136, 0.55);
white-space: nowrap;
border-bottom: solid 5px grey;
text-align: left;
padding-left: 5px;
position: relative;
}
.pkmn-bar {
content: '';
background: #745fb5;
white-space: nowrap;
text-align: left;
position: absolute;
left: 0;
bottom: -5px;
height: 5px;
background: green;
display: block;
border-radius: 0 0 0 5px;
}
.pkmn-info {
background: #333538;
border-radius: 0 5px 5px 0;
width: 70px;
text-align: center;
box-shadow: 0 1px 1px rgba(102, 119, 136, 0.55);
}
.pkmn-outer {
padding-bottom: 2px;
}
.pkmn-inner {
display: inline-block;
width: 3px;
}
.pkmn-sprite {
vertical-align: middle;
}
.pkmn-name {
font-size: 1.2em;
}
.pkmn-lvl {
font-size: 0.8em;
display: block;
}
.crown {
padding-top: 5px;
}
code {
padding: 0;
font-size: 1em;
color: white;
background-color: transparent;
border-radius: 0;
}
<div class="pkmn-pc">
<div class="pkmn-summary">
<img class="pkmn-sprite" src="https://cdn.bulbagarden.net/upload/e/ea/113MS.png" />
<code class="pkmn-name">15Characterssss</code>
<div class="pkmn-bar"></div>
</div>
<div class="pkmn-info">
<img class="crown" src="https://cdn.bulbagarden.net/upload/c/c5/Leaf_Crown_Sprite.png" />
<div class="pkmn-outer">
<img class="heart" src="https://image.ibb.co/kB8vi6/heart.png">
<div class="pkmn-inner"></div>
<img class="star" src="https://image.ibb.co/e7w4bR/Shiny_VIStar.png">
</div>
<code class="pkmn-lvl">lvl 100</code>
</div>
</div>
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%
I am creating a webApp for a golf calculator and when testing on my iPod, it seems the text and div tags are not centered like they are on Chrome. Then Inputs and Select tags however are. Here is my html/css
<header>
<h1>Simple Handicap Calculator</h1>
</header>
<section>
<input id="score1" class="score" type="tel" value="Score" onfocus="this.value = '';">
<input id="score2" class="score" type="tel" value="Score" onfocus="this.value = '';">
<input id="score3" class="score" type="tel" value="Score" onfocus="this.value = '';">
<div class="rating">Course</div>
<select id="courseRating" class="select"></select>
<div class="rating">Slope</div>
<select id="slopeRating" class="select"></select>
<div class="calculateButton" onclick="HandicapCalculator.CalculateHandicap();">Tap</div>
<div id="handicap">Handicap</div>
<div id="curtain"></div>
</section>
And then my css:
html {
font-size: 1em;
background: #825534;
color: #E6D4A7;
font-family: JosefinSlab;
}
header {
float: left;
width: 100%;
font-size: 32px;
text-align: center;
font-weight: bold;
text-shadow: 1px 1px 1px #36362C;
}
section {
float: left;
width: 100%;
}
section .score {
height: 38px;
width: 50%;
margin: 8px 25% 0 25%;
padding: none;
text-align: center;
font-size: 1.5em;
background: #5D917D;
box-shadow: 1px 1px 1px #36362C;
border: none;
-webkit-appearance: none;
-webkit-box-sizing: content-box;
}
section .rating {
float: left;
width: 50%;
margin: 8px 25% 0 25%;
font-size: 1.5em;
text-shadow: 1px 1px 1px #36362C;
text-align: center;
-webkit-appearance: none;
}
section .select {
float: left;
width: 50%;
margin: 8px 25% 0 25%;
padding: none;
background: #5D917D;
box-shadow: 1px 1px 1px #36362C;
font-size: 1.5em;
text-indent: 40%;
border: none;
-webkit-box-sizing: content-box;
}
section .calculateButton {
float: left;
height: 50px;
width: 50%;
margin: 8px 25% 0 25%;
background: #A8AD80;
box-shadow: 1px 1px 1px #36362C;
color: #36362C;
font-size: 2em;
line-height: 50px;
text-align: center;
-webkit-box-sizing: content-box;
}
section #curtain {
display: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #000;
opacity: .6;
}
section #handicap {
float: left;
height: 50px;
width: 70%;
margin: 8px 15% 0 15%;
background: #E6D4A7;
box-shadow: 1px 1px 1px #36362C;
color: #36362C;
font-size: 2em;
line-height: 50px;
text-align: center;
-webkit-box-sizing: content-box;
}
If there is anything else I can provide, just let me know. For a live testing version, ragstudio.com/handicapCalculator