окно поиска в CSS3 не правильный размер

Я пытаюсь сделать один из этих симпатичных CSS3 коробки поиска на основе кода с этого сайта: http://speckyboy.com/2012/02/15/how-to-build-a-stylish-css3-search-box/окно поиска в CSS3 не правильный размер

Все выглядит, как он делает в картине на этом сайте за исключением фактическое окно поиска, что вместо этого выглядит следующим образом (как в Safari и Chrome):

box

Любая помощь в получении в окне поиска, чтобы посмотреть, как это должен?

UPDATE: Вот код (вы также можете получить это по ссылке выше):

/* Form wrapper styling */ 
.form-wrapper { 
    width: 450px; 
    padding: 15px; 
    margin: 150px 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: ''; 
    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, 
.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; 
}

источник

2013-03-08 devirkahan

Нам понадобится ваш код :) а не просто картину! –

Дамп вашего кода в jsfiddle в дополнение к его вставке, чтобы мы могли его увидеть и отредактировать. Кроме того, вы просмотрели ВСЕ/другие браузеры? Вы используете сброс CSS? – Leeish

Похож на проблему с добавлением в CSS. – j08691

Box-проклейки является вашим другом:

.font-wrapper input { 
    ... 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

источник

2013-03-08 17:32:50

окно поиска в CSS3 не правильный размер

ответ

Смежные вопросы