Вёрстка поля для поиска

averin13 · August 4, 2011

Моя задача: сверстать поле для поиска такое же как на картинке(рис.1)

Моя проблема: При вёрстке поля для поиска вылезает какая-то непонятная белая рамка (в IE рамка чёрного цвета)(рис.2)

Мой вопрос: Как избавится от рамки белого цвета и как ещё можно улучшить мой свёрстанный текстбокс, чтобы он был похож на текстбокс с картинки ?

Страничку в браузере можно посмотреть по ссылке:http://web-luck.ru/horner/search.html?

Вот весь исходный:


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Текстбокс</title>
	<script src="jquery-1.6.2.min.js"></script>    
    <script src="Modernizr 2.0.6.js"></script>
    <style>            
#searchbox
{
        background: #38cced;
        background-image: -moz-linear-gradient(#fff, #38cced);
        background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #38cced),color-stop(1, #fff));

        -moz-border-radius: 15px;
        border-radius: 15px;

        border-width: 1px;
        border-style: solid;
        border-color: #38cced #38cced #38cced;
        width: 270px;
        height: 27px;
        padding: 10px;
        overflow: hidden; /* Clear floats */
}
#search, #submit
{
        float: left;
}

#search
{
        padding: 5px 9px;
        height: 15px;
        width: 200px;
        border: 1px solid #a4c3ca;
        font: normal 13px 'trebuchet MS', arial, helvetica;


        -moz-border-radius: 50px 3px 3px 50px;
         border-radius: 15px 15px 15px 15px ;
         -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
         -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}

/* ———————-- */

#submit
{
        background-image: url(search2.jpg) ;            
        height: 30px;
        margin: 0 0 0 10px;
        padding: 0;
        width: 30px;
        cursor: pointer;

}

#submit:hover
{
        background-image: url(search2.jpg) ;
}       

#submit:active
{
        background-image: url(search2.jpg) ;
}

#submit::-moz-focus-inner
{
       border: 0;  /* Small centering fix for Firefox */
}
	/* Начало левой навигация*/
ul#mainNav {
list-style:none;
width:298px;
margin:0;
padding:0;
}

#mainNav li {
text-align:center;
background:url(item.gif) no-repeat;
font-weight:bold;
padding:15px;
}

#mainNav li.search {
text-align:center;
background:url(search.jpg) no-repeat;
font-weight:bold;
padding:35px;
}
/* Конец левой навигация*/
small {
color:#70c4d8;
text-transform:uppercase;
font-weight:bold;
font-size:.7em;
margin:10px;
}
    </style>
</head>
  <body>
    <small>Поиск по темам</small>
 <ul id="mainNav">
	<li class="search"></li>
	<form id="searchbox">
    <input id="search" type="text" placeholder="Поиск по сайту...">
    <input id="submit" type="submit"  value="">
	</form>
 </ul>
 </body>
</html>

Заранее спасибо.

Vlad · August 4, 2011

Вы стиль применяете к кнопке, а для неё по умолчанию добавляется рамка. Поставьте border: none.

buddah · August 4, 2011

Обнулить кнопке бордеры либо делать картинку-ссылку вместо submit как вариант.

averin13 · August 4, 2011

Вау!.Как оперативно Влад, большое спасибо.

rediskavet · August 4, 2011

Обнулить кнопке бордеры либо делать картинку-ссылку вместо submit как вариант.

Ссылка вместо сабмита не будет от интера нажиматься, стоит повозиться чуть дольше но оставить submit.

Vlad · August 4, 2011

Если рамки не будет, то не станет заметно и нажатие на кнопку.

rediskavet · August 4, 2011

Если рамки не будет, то не станет заметно и нажатие на кнопку.

Я не про визуальные эфекты нажатия на кнопку.

Если нажать enter то sabmit ведь свою функцию выполнит, данные из <input type="text"> будут на сервер отправлены. А если там ссылка будет то нужно по ней кликать мышкой.

Edited August 4, 2011 by rediskavet

Sign In

Вёрстка поля для поиска

Question

averin13

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

buddah

Link to comment

Share on other sites

averin13

Link to comment

Share on other sites

rediskavet

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

rediskavet

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information