Jump to content
  • 0

Помогите убрать рамку

froot

Asked by froot,

 Share

Question

froot Explorer

froot

Posted
Posted

Доброго времени суток. Столкнулся с проблемой, в форме поиска отображается непонятная рамка, причем только в chrome, в мозиле отсутствует. Не понимаю как убрать.
Вот изображение:

a1a81da2f871eba548842b8960608469.png

 

Вот css:

.search{	float: right; 	margin-top: 10px; 	padding: 0px 30px; 	position: relative; 	width: 170px;}.search .input{	background: #fff; 	border: 1px solid #ececec; 	border-radius: 10px; 	box-sizing: border-box; 	font: 13px arial, sans-serif; 	height: 30px; 	outline: none; 	padding: 5px 37px 5px 15px; 	width: 100%;}.search .submit{	background: url(images/go.png) 50% no-repeat; 	border: none; 	height: 30px; 	opacity: 0.3; 	position: absolute; 	right: 30px; 	top: 0px; 	width: 30px; outline: none;}.search .submit:hover{	opacity: 0.8;}

вот сама форма:

<form class="search" action="./" method="get">    <input class="input" type="text" name="s" placeholder=""id="s" value="<?php the_search_query(); ?>" />    <input class="submit" type="image"   value=""/></form>
Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0
Struggle Explorer

Struggle

Posted
Posted (edited)

ок, попробую спасибо

сменил type="image" на type="search" , рамка исчезла, но перестала работать и сама кнопка 

Линк в студию можно ? 

 

Можно попробывать такой фикс

 

input[type=file] {

border: 0;

outline: none;

}

Edited by Struggle
Link to comment
Share on other sites
  • 0
froot Explorer

froot

Posted
  • Author
Posted (edited)

Вот весь файл стилей, может тут что-то нетак:

*
{
margin: 0; padding: 0;
}
body
{
background: #fff;
}
.main
{
background: #fff; height: auto; margin: 0 auto; overflow: hidden; width: 1090px;
}
.head
{
background-color: #fff; height: 80px; width: 1090px;
}
.logo
{
float: left; margin-left: 30px; margin-top: 30px;
}
.content-main
{
}
.ads-top
{
background-color: #e6e6e6; border-radius: 10px; float: center; height: 130px; margin: 15px auto; width: 1030px;
}
.ads-top img
{
border-radius: 10px;
}
.menu
{
width: 500px;
}
ul.menu
{
background-color: #fff; background-repeat: no-repeat; border-radius: 10px; display: inline-block; margin: 0; moz-border-radius: 10px; padding: 0; webkit-border-radius: 2px; width: 1090px;
}
ul.menu li
{
float: left; list-style: none; position: relative;
}
ul.menu li span
{
font-family: 'arial', sans-serif; font-size: 18px;
}
ul.menu li a
{
color: #303030; display: block; font-family: arial, sans-serif; font-size: 24px; padding: 10px 30px 10px 30px; text-decoration: none;
}
ul.menu li a:hover
{
color: #505050;
}
ul.menu li:first-child a:hover
{
border-radius: 10px 0 0 2px; moz-border-radius: 10px 0 0 2px; webkit-border-radius: 10px 0 0 2px;
}
ul.menu li ul
{
border-color: #303030; display: none;
}
ul.menu li:hover ul
{
background-color: #f6f6f6; border: 1px solid #ececec; border-radius: 10px; display: block; moz-border-radius: 10px; position: absolute; top: 47px; webkit-border-radius: 10px; z-index: 1303030;
}
ul.menu li:hover ul li
{
border-right: none; float: none; width: auto;
}
ul.menu li:hover ul li a
{
border-right: none; font-size: 16px; padding: auto;
}
ul.menu li:hover ul li a:hover
{
background-color: transparent; color: #505050; text-decoration: underline;
}
ul.menu li:hover ul li:first-child a:hover
{
border-radius: 0; moz-border-radius: 0; webkit-border-radius: 0;
}
.search
{
float: right; margin-top: 10px; padding: 0px 30px; position: relative; width: 170px;
}
.search .input
{
background: #fff; border: 1px solid #ececec; border-radius: 10px; box-sizing: border-box; font: 13px arial, sans-serif; color: #808080; height: 30px; outline: none; padding: 5px 37px 5px 15px; width: 100%;
}
.search .input:hover
{
border: 1px solid #d4d4d4;
}
.search .submit
{
background: url(images/go.png) 50% no-repeat; border: none; height: 30px; opacity: 0.3; position: absolute; right: 30px; top: 0px; width: 30px; outline: none;
}
.search .submit:hover
{
opacity: 0.8;
}
.content
{
float: left; margin-left: 30px; margin-top: 15px; min-height: 700px; overflow: hidden; width: 700px;
}
.content ul
{
list-style: none;
}
.content ol
{
list-style: none;
}
.mainli
{
list-style: none;
}
.post
{
min-height: 200px; padding: 0px 0px 40px 0px; width: 700px;
}
.post img
{
border-radius: 10px; display: block; float: left; height: 200px; margin-right: 30px; opacity: 1; position: relative; width: 300px;
}
.post img:hover
{
border-radius: 10px; display: block; float: left; height: 200px; margin-right: 30px; opacity: 0.8; position: relative; width: 300px;
}
.post h1
{
color: #303030; font-family: 'Cuprum', sans-serif; font-size: 26px; font-weight: normal; line-height: 1.2; text-decoration: none;
}
.post h1 a
{
color: #303030; text-decoration: none;
}
.post h1 a:hover
{
color: #505050; text-decoration: none;
}
.post h2
{
color: #9aa3ae; font-family: verdana, sans-serif; font-size: 11px; font-weight: normal; list-style: none; text-decoration: none;
}
.post h2 a
{
color: #9aa3ae; text-decoration: none;
}
.post h2 a:hover
{
text-decoration: underline;
}
.post p
{
color: #303030; font: 16px arial, Helvetica, sans-serif; font-weight: normal; line-height: 1.6; margin-top: 4px; text-decoration: none;
}
.post p a
{
color: #0064af; font-weight: normal; text-decoration: none;
}
.post p a:hover
{
color: #0064af; font-weight: normal; text-decoration: underline;
}
.stats li
{
display: inline; float: left; list-style: none; margin-right: 15px;
}
.stats li a
{
background-image: url(images/pp.png); background-repeat: no-repeat; color: #9aa3ae; font: 11px verdana, sans-serif; font-weight: normal; text-decoration: none;
}
.stats-views
{
background-image: url(images/pp.png); background-position: 0 -15px; background-repeat: no-repeat; color: #9aa3ae; font: 11px verdana, sans-serif; font-weight: normal; padding: 0 0 0 20px; text-decoration: none;
}
.stats-comments
{
background-image: url(images/pp.png); background-position: 0 0px; background-repeat: no-repeat; color: #9aa3ae; font: 11px verdana, sans-serif; font-weight: normal; padding: 0 0 0 20px; text-decoration: none;
}
.stats time
{
color: #9aa3ae; font: 11px verdana, sans-serif; font-weight: normal; text-decoration: none;
}
.text
{
}
.text h1
{
color: #303030; font-family: 'arial', sans-serif; font-size: 36px; font-weight: normal; line-height: 1.2; margin-bottom: 20px; text-decoration: none;
}
.text h2
{
color: #303030; font-family: 'arial', sans-serif; font-size: 22px; font-weight: normal; line-height: 1.2; margin-bottom: 20px; margin-top: 20px; text-decoration: none;
}
.text h3
{
color: #303030; font-family: 'arial', sans-serif; font-size: 22px; font-weight: normal; line-height: 1.2; margin-bottom: 20px; margin-top: 20px; text-decoration: none;
}
.text h4
{
color: #303030; font-family: 'arial', sans-serif; font-size: 22px; font-weight: bold; line-height: 1.2; margin-bottom: 20px; margin-top: 60px; text-decoration: none;
}
.text p
{
color: #303030; font: 16px arial, Helvetica, sans-serif; font-weight: normal; line-height: 1.6; margin-bottom: 15px; text-decoration: none;
}
.text p a
{
color: #0064af; text-decoration: underline;
}
.text blockquote
{
background: #f9f9f9; border-left: 10px solid #ececec; margin: 20px 0px; overflow: hidden; padding: 10px 30px 0 20px;
}
.text blockquote p, blockquote a, blockquote
{
color: #303030; font-size: 1em; font-style: italic; font-weight: normal;
}
blockquote:before, blockquote:after, q:before, q:after
{
content: "";
}
blockquote, q
{
quotes: "" "";
}
blockquote
{
display: block; webkit-margin-after: 1em; webkit-margin-before: 1em; webkit-margin-end: 40px; webkit-margin-start: 40px;
}
.text ol,
.text ul
{
color: #303030; font: 16px arial, Helvetica, sans-serif; font-weight: normal; line-height: 1.6; margin-bottom: 15px;
}
.text ul
{
list-style-image: url(images/dot.png);
}
.text ol
{
list-style: decimal;
}
.text li
{
margin-left: 25px;
}
.ads-text
{
background-color: #e6e6e6; height: 130px; margin: 30px 0; width: 700px;
}
.alignleft
{
float: left;
}
.alignright
{
float: right;
}
.alignleft
{
display: block; margin-left: auto; margin-right: auto;
}
img.alignleft
{
margin: 7px 24px 7px 0;
}
.wp-caption.alignleft
{
margin: 7px 14px 7px 0;
}
img.alignright
{
margin: 7px 0 7px 24px;
}
.wp-caption.alignright
{
margin: 7px 0 7px 14px;
}
img.aligncenter,.wp-caption.aligncenter
{
margin-bottom: 7px; margin-top: 7px;
}
.text img.size-full,
.text img.size-large,
.text img.wp-post-image
{
height: auto; margin-bottom: 10px; margin-top: 10px; max-width: 100%;
}
.sidebar
{
float: right; margin-right: 30px; margin-top: 15px; width: 300px;
}
.ads-right
{
background-color: #e6e6e6; height: 500px; margin: 30px 0; width: 300px;
}
.social
{
background-color: #f6f6f6; border-radius: 10px; height: auto; margin: 30px 0; padding: 20px 0px 20px 0px; width: 300px;
}
.widget
{
background: #f6f6f6; border: 1px solid #f6f6f6; border-radius: 10px; list-style: none; margin-bottom: 30px;
}
.widget h2
{
color: #303030; font-family: 'arial', sans-serif; font-size: 22px; font-weight: normal; padding: 20px 0; text-align: center; text-decoration: none;
}
.textwidget
{
color: #303030; font: 14px arial, Helvetica, sans-serif; font-weight: normal; line-height: 1.6; padding: 0px 20px 20px 20px;
}
.recentcomments
{
color: #9aa3ae; font: 14px arial, sans-serif; font-weight: normal; line-height: 1.4; list-style: none; padding: 0px 20px 20px 20px;
}
.recentcomments a
{
color: #303030; font: 14px arial, sans-serif; font-weight: normal; text-decoration: none;
}
.recentcomments a:hover
{
color: #505050; font: 14px arial, sans-serif; font-weight: normal; text-decoration: underline;
}
.widget_recent_entries
{
font: 14px arial, sans-serif; font-weight: normal; padding: 0px 20px 20px 20px;
}
.widget_recent_entries li
{
border-bottom: 1px solid #ececec; line-height: 1.3; list-style: none; margin-bottom: 10px;
}
.widget_recent_entries li:last-child
{
border-bottom: none; margin-bottom: 0px;
}
.widget_recent_entries li a
{
color: #303030; line-height: 1.3; list-style: none; text-decoration: none;
}
.widget_recent_entries li a:hover
{
color: #505050; line-height: 1.3; list-style: none; text-decoration: underline;
}
.post-date
{
color: #9aa3ae; font: 11px verdana, sans-serif; font-weight: normal; text-decoration: none;
}
.scroll-top a
{
background: url(images/top.png) no-repeat 0 -60px; border-radius: 10px; bottom: 30px; cursor: pointer; display: none; height: 60px; overflow: hidden; position: fixed; right: 30px; width: 60px;
}
.scroll-top a:hover
{
background: url(images/top.png) no-repeat 0 -0px; border-radius: 10px; bottom: 30px; cursor: pointer; display: none; height: 60px; overflow: hidden; position: fixed; right: 30px; width: 60px;
}
.footer
{
background: #f6f6f6; border-radius: 10px; float: left; margin-bottom: 30px; margin-left: 30px; margin-top: 60px; overflow: hidden; padding: 15px; width: 1010px;
}
.cpt
{
float: left; font-family: 'arial', sans-serif; font-size: 16px;
}
.cpt a
{
color: #0064af; font-weight: normal; line-height: 1.2; text-decoration: none; text-decoration: underline;
}
.cpt a:hover
{
color: #0064af; font-weight: normal; line-height: 1.2; text-decoration: none; text-decoration: underline;
}
.cpt p
{
color: #303030; font-weight: normal; line-height: 1.2; text-decoration: none;
}
.menu-foot
{
float: left;
}
.menu-foot ul
{
list-style: none; margin-left: 150px;
}
.menu-foot ul li a
{
color: #303030; font-family: 'arial', sans-serif; font-size: 16px; font-weight: normal; text-decoration: none;
}
.menu-foot ul li a:hover
{
color: #505050; font-family: 'arial', sans-serif; font-size: 16px; font-weight: normal; text-decoration: underline;
}
.button-log
{
background: #fff; border: 1px solid #ececec; border-radius: 10px; color: #9aa3ae; float: right; font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin-left: 15px; moz-border-radius: 10px; padding: 5px 10px; text-decoration: none; webkit-border-radius: 10px;
}
.button-log:hover
{
background: #9aa3ae; border: 1px solid #9aa3ae; color: #fff; font-family: Arial, Helvetica, sans-serif;
}
.button-reg
{
background: #fff; border: 1px solid #ececec; border-radius: 10px; color: #9aa3ae; float: right; font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin-left: 15px; moz-border-radius: 10px; padding: 5px 10px; text-decoration: none; webkit-border-radius: 10px;
}
.button-reg:hover
{
background: #9aa3ae; border: 1px solid #9aa3ae; color: #fff; font-family: Arial, Helvetica, sans-serif;
}
.top-buttoms
{
float: right; margin-right: 30px; margin-top: 30px; max-height: 40px; width: 600px;
}
.top-buttoms p
{
color: #9aa3ae; float: right; font: 13px arial, Helvetica, sans-serif; margin-top: 5px;
}
.gallery-icon
{
float: left;
}

input[type=button], input[type=submit] {
background: #f6f6f6; border: none; border-radius: 2px; color: #9aa3ae; float: left; font: Arial, Helvetica, sans-serif; font-size: 14px; padding: 5px 10px 5px 10px; text-decoration: none; cursor: pointer; outline:none;
}
.input {width:200px; height: 30px; margin:0px 0px; border: 1px solid #e6e6e6; border-radius: 2px; font: Arial, Helvetica, sans-serif; font-size: 14px; padding: 0px 10px ; outline:none;}
textarea {width:500px; max-width:500px; height: 200px; max-height:300px; border: 1px solid #e6e6e6; border-radius: 2px; outline:none; font-family: Arial, sans-serif; font-size: 14px; padding: 10px 10px ;}


линк в смысле на сайт? он у меня на денвере


 

ок, попробую спасибо


сменил type="image" на type="search" , рамка исчезла, но перестала работать и сама кнопка 

Линк в студию можно ? 

 

Можно попробывать такой фикс

 

input[type=file] {

border: 0;

outline: none;

}

 

не сработало

Edited by froot
Link to comment
Share on other sites
  • 0
xzarxzes Explorer

xzarxzes

Posted
Posted (edited)

 

Доброго времени суток. Столкнулся с проблемой, в форме поиска отображается непонятная рамка, причем только в chrome, в мозиле отсутствует. Не понимаю как убрать.

Вот изображение:

a1a81da2f871eba548842b8960608469.png

 

Вот css:

.search{	float: right; 	margin-top: 10px; 	padding: 0px 30px; 	position: relative; 	width: 170px;}.search .input{	background: #fff; 	border: 1px solid #ececec; 	border-radius: 10px; 	box-sizing: border-box; 	font: 13px arial, sans-serif; 	height: 30px; 	outline: none; 	padding: 5px 37px 5px 15px; 	width: 100%;}.search .submit{	background: url(images/go.png) 50% no-repeat; 	border: none; 	height: 30px; 	opacity: 0.3; 	position: absolute; 	right: 30px; 	top: 0px; 	width: 30px; outline: none;}.search .submit:hover{	opacity: 0.8;}

вот сама форма:

<form class="search" action="./" method="get">    <input class="input" type="text" name="s" placeholder=""id="s" value="<?php the_search_query(); ?>" />    <input class="submit" type="image"   value=""/></form>

Вот ответ на ваш вопрос  http://stackoverflow.com/questions/4108983/input-type-image-shows-unwanted-border-in-chrome-and-broken-link-in-ie7, для type="image" надо указывать src, поставтье type="button" или type="submit", эта рамка вроде как указывает на отсутствующий src, как я понял. Или в атрибуте src указывайте адрес иконки, а background уберите.

Edited by xzarxzes
Link to comment
Share on other sites
  • 0
froot Explorer

froot

Posted
  • Author
Posted

ок, спасибо, ща попробуем


Сработало, поменял:

<form class="search" action="./" method="get">      <input class="input" type="text" name="s" placeholder=""id="s" value="<?php the_search_query(); ?>" />    <input class="submit" type="image"   src="<?php bloginfo('template_directory'); ?>/images/go.png" value=""/></form>  
.search{	float: right; 	margin-top: 10px; 	padding: 0px 30px; 	position: relative; 	width: 170px; }.search .input{	background: #fff; 	border: 1px solid #ececec; 	border-radius: 10px; 	box-sizing: border-box; 	font: 13px arial, sans-serif; color: #808080;	height: 30px; 	outline: none; 	padding: 5px 37px 5px 15px; 	width: 100%; }.search .input:hover{	border: 1px solid #d4d4d4; 	}.search .submit{	 	border: none; 	 	opacity: 0.3; 	position: absolute; 	right: 40px; 	top: 10px; 	 outline: none; }.search .submit:hover{	opacity: 0.8; }

Спасибо большое за помощь xzarxzes! Без вас бы не справился


Работает, всем спасибо B)

Link to comment
Share on other sites
Guest
This topic is now closed to further replies.
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept