Forums
View unanswered posts | View active topics It is currently Mon Dec 11, 2017 2:59 pm



Reply to topic  [ 1 post ] 
 border-radius on INPUT element 
Author Message

Joined: Sun Feb 05, 2012 11:26 pm
Posts: 3
Post border-radius on INPUT element
Trying to style a simple text INPUT element (a search input field) with the following CSS3:

input.mysearchfield
{
background-color: #e9e9e9;
background-image: -ms-linear-gradient(top, #cfcfcf, #fafafa);
background-image: -moz-linear-gradient(top, #cfcfcf, #fafafa);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cfcfcf), to(#fafafa));
background-image: -webkit-linear-gradient(top, #cfcfcf, #fafafa);
background-image: -o-linear-gradient(top, #cfcfcf, #fafafa);
background-image: linear-gradient(top, #cfcfcf, #fafafa);
background-repeat: repeat-x;
background-position: center top;
border: 1px solid #7f7f7f;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: #555;
}
input.mysearchfield:focus
{
background-color: #ffffff;
background-image: -ms-linear-gradient(top, #ffffff, #ffffff);
background-image: -moz-linear-gradient(top, #ffffff, #ffffff);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#ffffff));
background-image: -webkit-linear-gradient(top, #ffffff, #ffffff);
background-image: -o-linear-gradient(top, #ffffff, #ffffff);
background-image: linear-gradient(top, #ffffff, #ffffff);
border-color: #cfcfcf;
-moz-box-shadow: 0 0 5px #888888;
-webkit-box-shadow: 0 0 5px #888888;
box-shadow: 0 0 5px #888888;
}

Works as expected in any CSS3 capable browser, but in IE with Pie applied the border appears with radius and without the radius looking like the attached image.

Any ideas what I am doing wrong?

PS: I can't wrap the input in a div because I'd loose the input:focus CSS selector plus the CMS doesn't offer a method on changing the HTML output without major development effort.


Attachments:
searchinput.jpg [4.35 KiB]
Not downloaded yet
Wed Feb 29, 2012 11:14 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 1 post ] 

Who is online

Users browsing this forum: Steeler [Crawler] and 4 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.