How can I make this responsive? I want to change the width from px to %. But I don't get the same result. I want to maintain the size but I want it to be responsive.
.cf:before, .cf:after{content:"";display:table;}
.cf:after{clear:both;}
.cf{zoom:1;}
.form-wrapper {
width: 450px;
padding: 15px;
margin: 0 auto;
background: #444;
background: rgba(0,0,0,.2);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}
.form-wrapper input {
width: 330px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #eee;
-moz-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
.form-wrapper input:focus {
outline: 0;
background: #fff;
-moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
-webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-moz-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 110px;
font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: #fff;
text-transform: uppercase;
background: #d83c3c;
-moz-border-radius: 0 3px 3px 0;
-webkit-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}
.form-wrapper button:hover{
background: #e54040;
}
.form-wrapper button:active,
.form-wrapper button:focus{
background: #c42f2f;
}
.form-wrapper button:before {
content: '';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #d83c3c transparent;
top: 12px;
left: -6px;
}
.form-wrapper button:hover:before{
border-right-color: #e54040;
}
.form-wrapper button:focus:before{
border-right-color: #c42f2f;
}
.form-wrapper button::-moz-focus-inner {
border: 0;
padding: 0;
}
HTML:
<form class="form-wrapper cf">
<input type="text" placeholder="Search here..." required>
<button type="submit">Search</button>
</form>
There is nothing more I can say, so ill just add this text since it won't let me post this question because of too little words. Thanks in advance guys.
*, *:before, *:after{
box-sizing: border-box;
}
.cf:before, .cf:after{content:"";display:table;}
.cf:after{clear:both;}
.cf{zoom:1;}
.form-wrapper {
width: 450px;
padding: 15px;
margin: 0 auto;
background: #444;
background: rgba(0,0,0,.2);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}
.form-wrapper input {
width: 310px;
height: 40px;
padding: 10px 5px;
float: left;
font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #eee;
-moz-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
.form-wrapper input:focus {
outline: 0;
background: #fff;
-moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
-webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-moz-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 110px;
font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: #fff;
text-transform: uppercase;
background: #d83c3c;
-moz-border-radius: 0 3px 3px 0;
-webkit-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}
.form-wrapper button:hover{
background: #e54040;
}
.form-wrapper button:active,
.form-wrapper button:focus{
background: #c42f2f;
}
.form-wrapper button:before {
content: '';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #d83c3c transparent;
top: 12px;
left: -6px;
}
.form-wrapper button:hover:before{
border-right-color: #e54040;
}
.form-wrapper button:focus:before{
border-right-color: #c42f2f;
}
.form-wrapper button::-moz-focus-inner {
border: 0;
padding: 0;
}
#media only screen and (min-width: 320px) and (max-width: 480px) {
.form-wrapper{
width: 300px;
}
.form-wrapper input{
width: 160px;
}
}
<form class="form-wrapper cf">
<input type="text" placeholder="Search here..." required>
<button type="submit">Search</button>
</form>
You can use "max-width" instead of width it will make it responsive and also maintain the width you don't need to make it in "%"
<pre>
.form-wrapper {
max-width: 450px;
}
.form-wrapper input {
max-width: 330px;
}
</pre>
Related
I'm trying to move my nav menu down. It's currently being 75% covered by the admin bar http://3v3rivals.tk
I want to move the nav menu just below the admin bar, with little to no space between the two. I may need to move the header down a bit also.... How would I go about moving my nav menu down?
/************************************************
Main Navigation
************************************************/
#nav-logo {
float: left;
padding: 8px 10px;
max-width: 100px;
}
#nav-main-wrapper {
border-bottom: 1px solid #444;
-ms-box-shadow: 0 4px 10px -3px #000;
-moz-box-shadow: 0 4px 10px -3px #000;
-o-box-shadow: 0 4px 10px -3px #000;
-webkit-box-shadow: 0 4px 15px -5px #000;
box-shadow: 0 4px 10px -3px #000;
float: left;
margin-bottom: 1px solid #888;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 50px;
z-index: 2000;
}
#nav-main {
color: #fff;
font: 700 14px/14px 'Open Sans Condensed', sans-serif;
margin: 0 auto;
text-transform: uppercase;
width: 960px;
height: 50px;
}
ul.nav-main a {
color: #fff;
float: left;
font: 700 14px/14px 'Open Sans Condensed', sans-serif;
padding: 18px;
-moz-text-shadow: 2px 2px 1px #000;
-ms-text-shadow: 2px 2px 1px #000;
-o-text-shadow: 2px 2px 1px #000;
-webkit-text-shadow: 1px 1px 1px #000;
text-shadow: 1px 1px 1px #000;
}
ul.nav-main .menu-item-home {
background: url(images/nav-sep.png) no-repeat right bottom !important;
}
ul.nav-main .menu-item-home a {
color: #fff !important;
font: 700 14px/14px 'Open Sans Condensed', sans-serif;
padding: 18px;
-moz-text-shadow: 1px 1px 1px #000 !important;
-ms-text-shadow: 1px 1px 1px #000 !important;
-o-text-shadow: 1px 1px 1px #000 !important;
-webkit-text-shadow: 1px 1px 1px #000 !important;
text-shadow: 1px 1px 1px #000 !important;
}
ul.nav-main a:hover {
text-decoration: none;
}
#nav-main-left {
float: left;
position: relative;
width: 810px;
}
ul.nav-main {
display: inline;
float: left;
position: relative;
max-width: 710px;
}
ul.nav-main li {
background: url(images/nav-sep.png) no-repeat right bottom;
display: inline;
float: left;
position: relative;
}
ul.nav-main .current-menu-item,
ul.nav-main .current-post-parent {
background: #eee url(images/nav-bg.png) repeat-x bottom;
}
ul.nav-main li:hover {
background: #eee url(images/nav-bg.png) repeat-x bottom !important;
}
ul.nav-main .current-menu-item a,
ul.nav-main .current-post-parent a {
color: #000;
float: left;
font: 700 14px/14px 'Open Sans Condensed', sans-serif;
padding: 18px;
-moz-text-shadow: 1px 1px 1px #fff;
-ms-text-shadow: 1px 1px 1px #fff;
-o-text-shadow: 1px 1px 1px #fff;
-webkit-text-shadow: 1px 1px 1px #fff;
text-shadow: 1px 1px 1px #fff;
}
ul.nav-main li:hover a {
color: #000 !important;
float: left;
font: 700 14px/14px 'Open Sans Condensed', sans-serif;
padding: 18px;
-moz-text-shadow: 1px 1px 1px #fff !important;
-ms-text-shadow: 1px 1px 1px #fff !important;
-o-text-shadow: 1px 1px 1px #fff !important;
-webkit-text-shadow: 1px 1px 1px #fff !important;
text-shadow: 1px 1px 1px #fff !important;
}
ul.nav-main li ul {
display: none;
}
ul.nav-main li:hover ul {
background: #ddd url(images/striped-bg.png);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-moz-box-shadow: 0 3px 7px -2px #333;
-ms-box-shadow: 0 3px 7px -2px #333;
-o-box-shadow: 0 3px 7px -2px #333;
-webkit-box-shadow: 0 3px 7px -2px #333;
box-shadow: 0 3px 7px -2px #333;
display: block;
padding: 5px;
position: absolute;
left: 0px;
top: 50px;
width: 150px;
}
ul.nav-main li:hover ul li {
background: #eee;
position: relative;
}
ul.nav-main li:hover ul li a {
float: left;
padding: 8px;
width: 134px;
}
ul.nav-main li:hover ul li:hover,
ul.nav-main li:hover ul li:hover.current-menu-item {
background: #fff !important;
}
ul.nav-main li:hover ul li ul {
display: none;
}
ul.nav-main li:hover ul li:hover ul {
display: block;
margin: 0;
position: absolute;
left: 150px;
top: -5px;
width: 150px;
}
#nav-mobi {
display: none;
overflow: hidden;
}
#nav-mobi select {
border: 1px solid #2d2f31;
border-radius: 3px;
color: #fff;
float: left;
margin: 10px;
padding: 0 30px 0 5px;
width: 300px;
height: 30px;
-webkit-appearance: none !important;
}
#nav-search {
float: right;
padding-top: 9px;
position: relative;
text-align: right;
width: 150px;
}
#searchform {
float: left;
position: relative;
}
#searchform input {
background: url(images/search-icon.png) no-repeat right;
border: 0;
border-bottom: 1px solid #666;
border-radius: 2px;
-moz-box-shadow: 0 2px 10px -2px #000 inset;
-ms-box-shadow: 0 2px 10px -2px #000 inset;
-o-box-shadow: 0 2px 10px -2px #000 inset;
-webkit-box-shadow: 0 2px 10px -2px #000 inset;
box-shadow: 0 2px 10px -2px #000 inset;
color: #aaa;
float: left;
font: 12px/12px helvetica, arial, sans-serif;
margin: 0 0 10px;
padding: 9px 0 9px 10px;
width: 140px;
height: 12px;
}
#searchform #search-button {
border: none;
float: left;
}
#searchform #s:focus {
outline: none;
}
you are using fixed position on you nav which means that it is at the very top no matter what. I think what's confusing you is that when you see the website it looks all messed up but when a non admin sees it it is fine. If you have a lot of users that will see the admin bar then you will need to use some wp logic to see if the user is logged in as an admin and if so that "top" attribute will need to be like 75px or however tall the admin bar is. Also if you want a quick dirty fix there is a plugin that hides the admin bar.
I am trying to pad the bottom area for the placeholder text, because it is too close to the line. but i am not sure what property is going to work. Here is my css. And also, another problem is that when I open it on firefox, the magnifying icon is about 1 pixel higher than the line. It looks fine on chrome. Does anybody know?
Thanks.
.search_input{
font-family: Helvetica;
font-size:14px;
border:1px solid #000000;
border-top:1px;
border-right: -0px;
border-left: 0px;
margin-left: 3px;
margin-right: -23px;
margin-top: 6px;
width: 150px;
box-sizing: border-box;
}
#tfnewsearch input:focus {
outline: 0;
background: #fff;
-moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
-webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
#tfnewsearch input::-webkit-input-placeholder {
color: #999;
font-size: 17px;
padding-bottom:3px;
height: 19px;
}
#tfnewsearch input:-moz-placeholder {
color: #999;
font-size: 17px;
padding-bottom:3px;
}
#tfnewsearch input:-ms-input-placeholder {
color: #999;
font-size: 17px;
padding-bottom:3px;
}
.t_button {
outline: none; cursor: pointer;margin-bottom: -5px; margin-left: 22px;margin-right: 1px; border: solid 1px #000000; border-top:0px; border-left: 1px; border-right: 1px;
}
<form id="tfnewsearch" method="get" action="index.php">
<input type="text" class="search_input" name="q" size="17" maxlength="120" placeholder="Search" required><img src="imgs/icon_search.gif" value="search" class="t_button">
</form>
try to use padding to .search_input
.search_input{
font-family: Helvetica;
font-size:14px;
border:1px solid #000000;
border-top:1px;
border-right: -0px;
border-left: 0px;
margin-left: 3px;
margin-right: -23px;
margin-top: 6px;
width: 150px;
box-sizing: border-box;
padding-bottom:5px;
}
http://jsfiddle.net/yZXSJ/
How can I change the position of this search box to right-top and align it?
HTML
<form class="form-wrapper cf">
<input type="text" placeholder="Search here..." required>
<button type="submit">Go</button>
</form>
CSS
.cf:before, .cf:after{
content:"";
display:table;
}
.cf:after{
clear:both;
}
.cf{
zoom:1;
}
/* Form wrapper styling */
.form-wrapper {
width: 450px;
padding: 15px;
margin: 600px auto 50px auto;
background: #444;
background: rgba(0,0,0,.2);
border-radius: 10px;
box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}
/* Form text input */
.form-wrapper input {
width: 330px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #eee;
border-radius: 3px 0 0 3px;
}
.form-wrapper input:focus {
outline: 0;
background: #fff;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-moz-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
/* Form submit button */
.form-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 110px;
font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: #fff;
text-transform: uppercase;
background: #d83c3c;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}
.form-wrapper button:hover{
background: #e54040;
}
.form-wrapper button:active,
.form-wrapper button:focus{
background: #c42f2f;
outline: 0;
}
.form-wrapper button:before { /* left arrow */
content: '';
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #d83c3c transparent;
top: 12px;
left: -6px;
}
.form-wrapper button:hover:before{
border-right-color: #e54040;
}
.form-wrapper button:focus:before,
.form-wrapper button:active:before{
border-right-color: #c42f2f;
}
.form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
border: 0;
padding: 0;
}
Close the button tag
You've floated both the search bar and
the button. The parent div won't use the height that the children
occupy, until you insert a div with style "clear:both". You've done
a "clear: both" after the form, and not after the children.
<form class="form-wrapper cf">
<input type="text" placeholder="Search here..." required>
<button type="submit">Go< /button>< div style="clear:both">
</div>
</form>
With respect to aligning it to right top, you need to position it absolute or fixed, and specify the "right" and "top" attributes. Did you even try doing that? Or, did you think that you could copy a snippet from somewhere and Stackoverflow members would fix it for you?
.form-wrapper {
width: 450px;
padding: 15px;
position: absolute;
top:50px;
right: 50px;
background: #444;
background: rgba(0,0,0,.2);
border-radius: 10px;
box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}
Here is the fixed code - http://jsfiddle.net/a2ev8/2/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 8 years ago.
Improve this question
For some reason the css is not working I'm not sure where the problem is:
This is how it's supposed to look:
http://codepen.io/lukepeters/pen/DtzvE
The JS FIDDLE:
http://jsfiddle.net/Wc3RK/
I don't know what went wrong? The code is the same but it's coming out differen't on the JS Fiddle.
CSS:
html
height: 100%
body
height: 100%
//background: #a7d5cd
+background-image(linear-gradient(#dddddd, #cccccc))
#people
position: relative
margin: 80px auto
padding: 0
width: 480px
font-family: 'Helvetica Neue', Helvetica, sans-serif
font-size: 16px
line-height: 22px
color: #3b3b3b
-webkit-font-smoothing: antialiased
list-style-type: none
li
position: relative
margin: 0 0 40px 0
padding: 10px 8px 8px 54px
height: 42px
border: 1px solid #bbbbbb
border-radius: 4px
box-shadow: 0 1px 3px rgba(0,0,0,0.06), inset 0 1px 0 #ffffff
background: #f6f6f6
img
position: absolute
top: -16px
left: -16px
z-index: 10
margin: 0
padding: 4px
width: 50px
height: 50px
border: 1px solid #bbbbbb
box-shadow: 0 1px 0 #ffffff
border-radius: 50%
background: #ffffff
h2
margin: 0
font-size: 18px
line-height: 22px
font-weight: 400
color: #4b4b4b
text-shadow: -1px -1px 0 rgba(255,255,255,0.7)
.info
margin: 0
display: block
em
margin: 0 18px 0 0
font-size: 11px
line-height: 20px
font-weight: 400
font-style: normal
letter-spacing: 1px
text-transform: uppercase
color: #5b5b5b
float: left
You are using the sass code, not css. I compiled the sass code and forked your fiddle. Search sass on google. Click on sass in the first page(codepen) to see the compiled css
http://jsfiddle.net/m52vb/
html {
height: 100%;
}
body {
height: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #cccccc));
background-image: -webkit-linear-gradient(#dddddd, #cccccc);
background-image: -moz-linear-gradient(#dddddd, #cccccc);
background-image: -o-linear-gradient(#dddddd, #cccccc);
background-image: linear-gradient(#dddddd, #cccccc);
}
#people {
position: relative;
margin: 80px auto;
padding: 0;
width: 480px;
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 16px;
line-height: 22px;
color: #3b3b3b;
-webkit-font-smoothing: antialiased;
list-style-type: none;
}
#people li {
position: relative;
margin: 0 0 40px 0;
padding: 10px 8px 8px 54px;
height: 42px;
border: 1px solid #bbbbbb;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), inset 0 1px 0 white;
background: #f6f6f6;
}
#people li img {
position: absolute;
top: -16px;
left: -16px;
z-index: 10;
margin: 0;
padding: 4px;
width: 50px;
height: 50px;
border: 1px solid #bbbbbb;
box-shadow: 0 1px 0 white;
border-radius: 50%;
background: white;
}
#people li h2 {
margin: 0;
font-size: 18px;
line-height: 22px;
font-weight: 400;
color: #4b4b4b;
text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.7);
}
#people li .info {
margin: 0;
display: block;
}
#people li .info em {
margin: 0 18px 0 0;
font-size: 11px;
line-height: 20px;
font-weight: 400;
font-style: normal;
letter-spacing: 1px;
text-transform: uppercase;
color: #5b5b5b;
float: left;
}
No idea what it is, but it's not CSS.
Correct CSS would be:
html
{
height: 100%;
}
body
{
height: 100%;
//background: #a7d5cd
background-image(linear-gradient(#dddddd, #cccccc))
}
#people
{
position: relative;
margin: 80px auto;
padding: 0;
width: 480px;
font-family: 'Helvetica Neue', Helvetica, sans-serif;
font-size: 16px;
line-height: 22px;
color: #3b3b3b;
-webkit-font-smoothing: antialiased;
list-style-type: none;
}
li
{
position: relative;
margin: 0 0 40px 0;
padding: 10px 8px 8px 54px;
height: 42px;
border: 1px solid #bbbbbb;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.06), inset 0 1px 0 #ffffff;
background: #f6f6f6;
}
img
{
position: absolute;
top: -16px;
left: -16px;
z-index: 10;
margin: 0;
padding: 4px;
width: 50px;
height: 50px;
border: 1px solid #bbbbbb;
box-shadow: 0 1px 0 #ffffff;
border-radius: 50%;
} background: #ffffff;
h2
{
margin: 0;
font-size: 18px;
line-height: 22px;
font-weight: 400;
color: #4b4b4b;
text-shadow: -1px -1px 0 rgba(255,255,255,0.7);
}
.info
{
margin: 0;
display: block;
}
em
{
margin: 0 18px 0 0;
font-size: 11px;
line-height: 20px;
font-weight: 400;
font-style: normal;
letter-spacing: 1px;
text-transform: uppercase;
color: #5b5b5b;
float: left;
}
Updated fiddle.
I have the following code:
#inputfield
{
width: 300px;
height: 28px;
font-style: italic;
outline: medium none;
padding: 3px 0px 3px 5px;
margin: -2px 1px 3px 0px;
box-shadow:inset 0 0 4px 0 #dfdfdf;
-moz-box-shadow:inset 0 0 4px 0 #dfdfdf;
-wevkit-box-shadow:inset 0 0 4px 0 #dfdfdf;
text-align: center;
font-size: 16px;
color: #9A9A9A;
font-family: Georgia, Arial, sans-serif;
}
#inputfield:focus {
color: #797f86;
text-align: left;
padding-left: 10px;
}
When the inputfield is clicked into for typing the width of the input box increases. The reason for that is that I have padding-left: 10px in the :focus. I require the padding-left so not sure how to still use this solution and not have the width issue?
I tried putting a width in the :focus pseudo-selector as well but didn't work. I tried using this:
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
but it didn't make a difference.
Simple: Remove the padding from #inputfield and increase the height to 31px instead of 28px and in #inputfield:focus decrease the width to 290px.
HTML:
<input id="inputfield" placeholder="Enter Text">
CSS:
#inputfield {
width: 300px;
height: 31px;
font-style: italic;
outline: medium none;
margin: -2px 1px 3px 0px;
box-shadow:inset 0 0 4px 0 #dfdfdf;
-moz-box-shadow:inset 0 0 4px 0 #dfdfdf;
-wevkit-box-shadow:inset 0 0 4px 0 #dfdfdf;
text-align: center;
font-size: 16px;
color: #9A9A9A;
font-family: Georgia, Arial, sans-serif;
border: 1px solid #206CAF;
}
#inputfield:focus {
color: #797f86;
text-align: left;
padding-left: 10px;
border: 1px solid #9A9A9A;
width: 290px;
}
See fiddle: http://jsfiddle.net/HjaTZ/