Css input shape [closed]
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this questionI wrote this css to make a form have the little openid logo on the left but I would like the form to retain its default look rather than get that right angley look.
<html>
<head>
<style type="text/css">
.openid-input {
background: url("http://id.gesellix.de/logo/openid_small_logo_white.gif") no-repeat scroll left center transparent;
height: 22px;
line-height: 22px;
padding-left: 18px;
}
</style>
</head>
<body>
<input type="text" tabindex="100" class="openid-input">
</body>
</html>
The default input styling gets overridden as soon as you change the background property. You must set CSS styling to mimic the default styling, but this can only be accomplished with CSS3. The following styles match closely on my system:
border:1px #e4e4e4 solid;
box-shadow:inset 0 1px 2px #000000;
-moz-box-shadow:inset 0 1px 2px #000000;
-webkit-box-shadow:inset 0 1px 2px #000000;
I've created an example here (link).
You can get pretty close to the default styling without CSS3 with just:
border:1px #cccccc solid;
border-top:2px #666666 solid;
精彩评论