I´m trying to do a basic effect in css to give some depth to my input, something like the image below. I´m trying to do with my code below but anything is missing here because my result is not icual to my image example.
My html:
<form>
<input type="text" placeholder="Search..." />
</form>
My css:
input[type="text"] {background-color:#232323; color:#fff; border:1px solid #151515; -webkit-border-radius: 15px;}
What I´m trying:
You will need at last 2 elements here: one for the dark-grey background, the other for the input.
The rest of my answer has been tested and works in IE10 +, FF & Chrome. If you're looking for IE support for 9 and below this wont work out of the box. It also relies on setting some fixed widths.
You'll recall I mentioned two elements, well you should be using a label tag anyway.
Adjust your HTML to te following:
<label>Search
<input type="text" placeholder="Search" />
</label>
The follwoing CSS positions the input to hide label text.
label {
display:inline-block;
border:1px;
padding:10px;
background-color:#111;
position:relative;
color:#FFF;
width:200px;
height:20px;
}
label input {
-moz-box-shadow: inset -1px -1px 2px #CCC;
-webkit-box-shadow: inset -1px -1px 2px #CCC;
box-shadow: inset -1px -1px 2px #CCC;
border-radius:5px;
background-color:#000;
color:#FFF;
border:none;
padding:3px;
position:absolute;
left:5px;
padding:5px;
width:200px;
height:16px;
top:7px; /* This is ((label hight + (padding * 2)) - this height)/2;*/
/* e.g. ((20 + (2 * 10)) - 16)/2 */
}
Demo
Not sure exactly what you mean, but is this getting close to what you want?
input[type="text"] {
background-color:#232323;
color:#fff;
padding:2px 5px;
border:5px solid #151515;
-webkit-border-radius: 15px;
}
Whenever I try to set left and right border for an inline-block element in my code, it won't work unless I set all.
border:2px solid black; /* does work */
border:0 2px solid black; /* doesn't work*/
Any idea?
the relevant part of CSS:
#highlights2{
width:640px;
text-align:left;
}
#highlights2 .highlight{
width:211px;
display:inline-block;
height:100px;
background-color:#0dc1d0;
}
#centerhighlight{
border:0 2px solid rgba(0,0,0,0.5);
border:2px solid black;
}
and HTML:
<div id="highlights2"><div class="highlight">asd</div><div style="" class="highlight" id="centerhighlight">fgh</div><div class="highlight">jkl</div></div>
This syntax is not valid for defining borders. If you want different styles for vertical and horizontal borders you need to write it longhand, for example:
border: 2px solid black;
border-top-width: 0;
border-bottom-width: 0;
If you want to use the shorthand for border width, you can use this:
border-width:0 2px;
border-style: solid;
border-color: black;
jsFiddle
I'm trying to style a button using <input type="button"> instead of just <button>. With the code I have, the button extends all the way across the screen. I just want to be able to fit it to the text that it's in the button. Any ideas?
See the jsFiddle Example or continue on to the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>WTF</title>
</head>
<style type="text/css">
.button {
color:#08233e;
font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
font-size:70%;
padding:14px;
background:url(overlay.png) repeat-x center #ffcc00;
background-color:rgba(255,204,0,1);
border:1px solid #ffcc00;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border-bottom:1px solid #9f9f9f;
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
cursor:pointer;
}
.button:hover {
background-color:rgba(255,204,0,0.8);
}
</style>
<body>
<div class="button">
<input type="button" value="TELL ME MORE" onClick="document.location.reload(true)">
</div>
</body>
Do you really want to style the <div>? Or do you want to style the <input type="button">? You should use the correct selector if you want the latter:
input[type=button] {
color:#08233e;
font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
font-size:70%;
/* ... other rules ... */
cursor:pointer;
}
input[type=button]:hover {
background-color:rgba(255,204,0,0.8);
}
See also:
JSFiddle Demo
W3C: CSS 3: 6.3 Attribute selectors
In your .button CSS, try display:inline-block. See this JSFiddle
Do you want something like the given fiddle!
HTML
<div class="button">
<input type="button" value="TELL ME MORE" onClick="document.location.reload(true)">
</div>
CSS
.button input[type="button"] {
color:#08233e;
font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
font-size:70%;
padding:14px;
background:url(overlay.png) repeat-x center #ffcc00;
background-color:rgba(255,204,0,1);
border:1px solid #ffcc00;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border-bottom:1px solid #9f9f9f;
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
cursor:pointer;
display:block;
width:100%;
}
.button input[type="button"]:hover {
background-color:rgba(255,204,0,0.8);
}
Float:left... Although I presume you want the input to be styled not the div?
.button input{
color:#08233e;float:left;
font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
font-size:70%;
padding:14px;
background:url(overlay.png) repeat-x center #ffcc00;
background-color:rgba(255,204,0,1);
border:1px solid #ffcc00;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border-bottom:1px solid #9f9f9f;
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
cursor:pointer;
}
.button input:hover{
background-color:rgba(255,204,0,0.8);
}
The issue isn't with the button, the issue is with the div. As divs are block elements, they default to occupying the full width of their parent element (as a general rule; I'm pretty sure there are some exceptions if you're messing around with different positioning schemes in one document that would cause it to occupy the full width of a higher element in the hierarchy).
Anyway, try adding float: left; to the rules for the .button selector. That will cause the div with class button to fit around the button, and would allow you to have multiple floated divs on the same line if you wanted more div.buttons.
Try putting
Display:inline;
In the CSS.
How can I style a button on IOS to look like the default active state?
I will be using touchstart, but want the button to look like a regular button that is being pressed.
HTML:
<button class="active"> I am pressed </button>
CSS:
button.active{
???
}
Images: (sorry, they are not the exact same crop-size)
EDIT: my latest attempt is:
button.active
{
border-radius: 12px;
border: 1px solid black;
background-color: #888;
box-shadow: 0 0 2px 2px #888;
}
It’s pretty close but the border shrinks in.
You could do this, faking a second border using the :before pseudo-elements
.active{
background:#e2e2e2;
font-weight:bold;
width:92px;
padding:.5em;
border:3px solid #e2e2e2;
border-radius:15px;
position:relative;
z-index:10;
}
.active:before{
content:"";
display:block;
position:absolute;
z-index:-1;
top:1px;
left:1px;
right:1px;
bottom:1px;
border:1px solid #000;
border-radius:15px;
}
Example: http://jsfiddle.net/E3jXr/
Hi i created a label with some css. The label css is working fine Firefox , chrome but when i run in IE the css is not coming properly.
label.formInputField {width:119px; height:26px; margin:3px 0px 0 0; padding:11px 6px 0 6px; background: #dadada url('css-images/labelBG.png') 50% 50% repeat-x; float:left; display: block; font-size: 12px; font-weight: normal; line-height: 1.1; color:#333; text-align:right; border: 1px solid #AAAAAA; border-right: 1px solid #dadada; }
.div_form_textbox { width:200px; float:left; text-align:left; background-color:#E6E6E6; height:29px; margin:3px 2px 0 0; padding:5px 0 3px 5px; border-right: 1px solid #AAAAAA;border-top: 1px solid #AAAAAA;border-bottom: 1px solid #AAAAAA; background: #e6e6e6 url('siva_images/form_input_bg.png') 50% 50% repeat-x;}
.ui-corner-left { -webkit-border-bottom-left-radius :4px;-webkit-border-top-left-radius :4px; border-bottom-left-radius: 4px; border-top-left-radius: 4px; }
.ui-corner-right { -webkit-border-bottom-right-radius :4px;-webkit-border-top-right-radius :4px;border-bottom-right-radius: 4px; border-top-right-radius: 4px; }
<label class ="formInputField ui-corner-left" for="Pdoctor">Doctor First Name:</label>
<div class="div_form_textbox ui-corner-right">
<input id="fname" name="fname" type="text" size="30" class="textbox ui-corner-all"/>
</div>
The proper output in mozilla and chrome like this
So the same thing in IE is coming like this:
The left side is the label and the right is the div inside there is a textbox. my problem
Only half of that is coming in the label of doctors first name . Please help me to get out this issue
I get that exact behaviour in IE when I look at it in Quirks Mode.
You probably just need to add a valid doctype as the very first line, such as:
<!DOCTYPE html>
If you already have that, then there are other possible reasons for Quirks Mode.
IE8 and less browsers cannot render CSS3 -webkit commands. Like the one you have used in css style:
.ui-corner-left { -webkit-border-bottom-left-radius :4px;....