I have the following css styles for an input tag...
<div class="container">
<input type="search" class="border" />
</div>
.container{
background: #000;
-webkit-border-radius: 25px 25px 25px 25px;
border: 3px solid #000;
}
.border{
background:none;
-webkit-border-radius: 25px 25px 25px 25px;
border: 3px solid #000;
}
When i set background: none, the border-radius did not work in chrome but works well in all other browsers including ie9. So why in chrome, border radius doesn't work when background:none ?
Example :
http://jsfiddle.net/TSKpN/5/
Using this code:
<style>
#some-id{
background:none;
border: 3px solid #000;
border-radius: 25px;
}
</style>
<body>
<input type="text" id="some-id">
</body>
Related
I'm looking at a text boxes here. They have a very nice effect. How can I achieve same effect with CSS. This is what I'm able to get but it's not close to that.
What I'm trying to achieve:
By default the textbox has greyish outline and when on focus it changes to blue color. I want a similar effect. I tried using outline property and shadows (in code below) but couldn't get that.
My attempt to get that effect (https://jsfiddle.net/7jphmdzf/):
#tags {
width:500px;
height:30px;
border: 1px solid grey;
border-radius: 10px;
}
input:focus {
outline: 0;
box-shadow: 0 0 0 0.7pt blue;
}
<div class="ui-widget">
<input id="tags">
</div>
You can use the following solution (https://jsfiddle.net/7jphmdzf/1/):
#tags {
outline:0;
width:500px;
height:30px;
border: 2px solid #ccc;
border-radius: 8px;
font-size:24px;
padding:8px 12px;
}
#tags:focus {
outline:0;
border: 2px solid #0097cf;
border-radius: 8px;
}
<div class="ui-widget">
<input id="tags" placeholder="Tags">
</div>
To change the color of the outline on :focus you have to set the border. There is no need for styling the outline or box-shadow of the <input>.
Try This,
#tags {
width:200px;
height:30px;
border: 2px solid grey;
border-radius: 10px;
}
#tags:focus {
outline: 0;
border: 2px solid #109cdf;
}
<div class="ui-widget">
<input id="tags">
</div>
I am designing HTML form, but I am facing two problems.
The first problem is that when I click inside the text field, the value text does not disappear.
The second thing is that I want to display the form in the bottom left corner of the screen, like you were sitting infront of a computer, and dragged the mouse down to the bottom left corner of the screen (with your right hand).
The link for the form is given
Code for the form:
<!DOCTYPE HTML>
<html>
<head>
<title>Facebook Add PHP Example</title>
<style type="text/css">
#formwrapper{
width:340px;
border:0;
background-color:#dce37f;
margin: 70px auto;
padding: 20px 0;
display:block;
}
#headdiv{
width:340px;
border:0;
margin: 10px 10px 10px 18.5px;
}
form {
display:block;
width:340px;
margin: 0 auto;
}
.text{
width: 275px;
border-radius:6px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background:#fcfcfc;
border:3px solid #cccccc;
box-shadow:0px 0px 3px 1px #cccccc;
outline: none;
padding:10px;
margin: 10px 10px 10px 18.5px;
}
.text:focus{
background:#e6edfc;
border:3px solid #deb93e;
box-shadow:0px 0px 3px 1px #cccccc;
}
.fname{
display: inline;
width: 116px;
border-radius:6px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background:#fcfcfc;
border:3px solid #cccccc;
box-shadow:0px 0px 3px 1px #cccccc;
outline: none;
padding:10px;
margin: 10px 10px 10px 18.5px;
}
.fname:focus{
background:#e6edfc;
border:3px solid #deb93e;
box-shadow:0px 0px 3px 1px #cccccc;
}
.lname{
display: inline;
width: 116px;
border-radius:6px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background:#fcfcfc;
border:3px solid #cccccc;
box-shadow:0px 0px 3px 1px #cccccc;
outline: none;
padding:10px;
margin: 10px 10px 10px 1px;
}
.lname:focus{
background:#e6edfc;
border:3px solid #deb93e;
box-shadow:0px 0px 3px 1px #cccccc;
}
.gatadress{
display: inline;
width: 116px;
border-radius:6px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background:#fcfcfc;
border:3px solid #cccccc;
box-shadow:0px 0px 3px 1px #cccccc;
outline: none;
padding:10px;
margin: 10px 10px 10px 18.5px;
}
.gatadress:focus{
background:#e6edfc;
border:3px solid #deb93e;
box-shadow:0px 0px 3px 1px #cccccc;
}
.postnr{
display: inline;
width: 116px;
border-radius:6px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background:#fcfcfc;
border:3px solid #cccccc;
box-shadow:0px 0px 3px 1px #cccccc;
outline: none;
padding:10px;
margin: 10px 10px 10px 1px;
}
.postnr:focus{
outline: none;
background:#e6edfc;
border:3px solid #deb93e;
box-shadow:0px 0px 3px 1px #cccccc;
}
#Jag{
display: inline;
border-radius:6px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background:#fcfcfc;
border:3px solid #cccccc;
box-shadow:0px 0px 3px 1px #cccccc;
outline: none;
padding:10px;
margin: 10px 10px 10px 22px;
}
.label{
padding:0px;
margin: 10px 10px 10px 0px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="formwrapper">
<div id="headdiv">
<img src="original_hembakat_besta_ll.png" />
</div>
<form id="demo-form" parsley-validate>
<input type="email" name="email" value= "E-Post*" parsley-trigger="change" required class="text" /><br/>
<input type="text" name="firstname" value= "Fornamn*" required size="18px" class="fname" />
<input type="text" name="lastname" value= "Efternamn*" required size="18px" class="lname" /><br/>
<input type="text" name="telephone" value= "Telefon*" required size="43px" class="text" /><br/>
<input type="text" name="gatuadress" value= "Gatuadress*" required size="43px" class="gatadress"/>
<input type="text" name="postnr" value= "Postnr*" required size="43px" class="postnr"/><br/>
<input type="text" name="postort" value= "Postort*" required size="43px" class="text" /><br/>
<input type="checkbox" id="Jag" value = "Jag godkänner villkoren" />
<label for = "jaggod" class="label">Jag godkanner villkoren</label><br/>
<input type="submit" value="Send" />
</form>
</div>
</body>
</html>
For placeholders, use placeholders, like:
<input type="text" placeholder="Your name" name="name">
This is considered bad design practice though, since you're making the usability of the form depend on whether there's data in there - if someone puts crap inside it, they have no way to find out what the field was originally for, which is a Bad Idea(tm) from a user experience perspective. Also, placeholders don't work in IE<=9.
You can emulate a simple placeholder with some simple Javascript, like:
<input type="text" value="placeholder" onfocus="undoPlaceholder(this)">
And JS:
function undoPlaceholder(e)
{
if(e.undone) return;
e.undone = true;
e.value = '';
}
The first of the two problems can be solved with the 'placeholder' attribute. Use that instead of 'value':
<input type="text" name="telephone" placeholder="Telefon*" required size="43px" class="text" />
I don't understand what the second problem is.
To make the text actually disappear when you click in the box, and re-appear when you click out, use this:
<input type="text" name="telephone" placeholder="Telefon*" onfocus="this.placeholder = ''" onblur="this.placeholder='Telefon*'" required size="43px" class="text" />
As far as the 2nd question, I too am confused.
fiddle here: http://jsfiddle.net/J6kHa/
For the placing form on the right bottom put this styles for the form wrapper
#formwrapper {
width: 340px;
border: 0;
background-color: #dce37f;
position: absolute;
bottom: 0;
right: 0;
}
I'm trying to create an overlay shadow over an image in CSS but I can't seem to get it right.
Here's the code that I have so far.
http://jsfiddle.net/Qf4Ka/1/
HTML
<section id="top-container" class="top-column" style="width:1050px; height:420px; ">
<div class="image" style="padding-top: 10px; float:left;"><img src="http://www.hdwallpapersinn.com/wp-content/uploads/2012/09/HD-Wallpaper-1920x1080.jpg" border="0"; width="263"; height="200" style="display: block; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; border-right: 1px solid #dddddd;">
<h4 style="font-size:30px; top: 90px; ">Nature</h4></div>
<div class="image" style="padding-top: 10px; float:left;"><img src="http://www.hdwallpapersart.com/wp-content/uploads/2013/04/tiger_wallpapers_hd_Bengal_Tiger_hd_wallpaper1.jpg" border="0"; width="262"; height="200" style="display: block; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; ">
<h4 style="font-size:30px; top: 90px; ">Bengal Tiger</h4></div>
</section>
CSS
.image {
position: relative;
}
h4 {
position: absolute;
width: 100%;
color: #fff;
float: left;
position: absolute;
font-size: 40px;
font-family: "Oswald";
text-align: center;
max-height:auto;
z-index:20;
text-shadow:1px 1px 2px #000;
-moz-text-shadow:1px 1px 2px #000;
-ms-text-shadow:1px 1px 2px #000;
-o-text-shadow:1px 1px 2px #000;
-webkit-text-shadow:1px 1px 2px #000;
}
I basically want it to look like the one in this website. I tried looking at some tutorials online but it screwed it up real bad so I removed it. I want it to look like the one in this website before and after I hover around the image. Thanks so much to anybody who can help me.
http://vr-zone.com/
Like this
demo
css
.image {
position: relative;
-webkit-box-shadow: inset 0 0 10px 10px #000;
-moz-box-shadow: inset 0 0 10px 10px #000;
box-shadow: inset 0 0 10px 10px #000;
}
OR REF LINK
Your text shadow effect actually seems to work fine, just a few syntactical errors within the html, and need to import the font. Also you don't need to vendor prefix the text-shadow rule.
Check this DEMO.
Edit: I agree with the comment above - Yes, if you are trying to give box-shadow to the image, then use box-shadow.
I have an issue with rendering my website for IE, Chrome and Opera. In Firefox the positioning works well:
while in the other browsers it looks like crap:
I have tried several positioning and padding options, but no luck. The problems appeared as I replaced the drop down menu with a jQuery replacement to enhance it graphically. The original dropdown is still there but with the css-option "display: none". I'd be thankful for a hint!
Here is the css:
This is the big blue box
.searchHomeForm a, .searchHomeForm a:hover {
color:#000000;
}
A invisible box around the three elements
div.searchHomeForm , .searchform {
height: 37px;
margin-left: auto;
margin-right: auto;
}
The white search bar
.search_bar {
position: inherit;
height: 25px;
letter-spacing: 0.02em;
line-height: 25px;
padding: 9px 0 0px 9px;
width: 390px;
border: 1px solid #95B6D6;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.11) inset;
border-radius: 0.25em 0 0 0.25em;
}
the jQuery Dropdown replacement
#searchformReplacement {
background: #EBEBEB;
padding: 0px 1px 5px 0;
margin-bottom: 3px;
border-top: 1px solid #95B6D6;
border-bottom: 1px solid #95B6D6;
width: 109px;
position: inherit;
}
the find button
.find_button {
background: url("../images/lupevufindsearchsubmit1.png") no-repeat scroll #bBbBbB;
-moz-border-radius: 0.25em;
border-radius: 0 0.25em 0.25em 0;
position: inherit;
height: 36px;
line-height: 36px;
margin: 0px 0 3px -1px;
padding: 4px 10px 4px 10px;
width: 60px;
border-top: 1px solid #95B6D6;
border-right: 1px solid #95B6D6;
border-bottom: 1px solid #95B6D6;
border-left: none;
box-shadow: 2px 2px 5px rgba(76, 133, 187, 0.50) inset;
transition: all 0.2s ease-in-out 0s;
}
Try removing position: inherit from the .search_bar {}, #searchformReplacement {}and .find_button {} add display:inline-block for each
or add display:inline and float:left for each. You may have to clear floats if you use float:left
maybe use float: left; on the three elemetns next to each other?
I made you a little example to have the required position, I'm using the inline-block propriety (and I love it) :
Html
<div id="container">
<input type="text" class="inline-block" />
<div class="inline-block">
Your custom select
</div>
<button type="submit" class="inline-block">Search</button>
</div>
CSS
.inline-block {
display:inline-block;
*display:inline; /*IE hack*/
*zoom:1; /*IE hack*/
}
#container {
background:lightBlue;
width:300px;
margin:0 auto;
text-align:center;
}
See the working fiddle !
Yes, clearing your floats are important as madhushankarox has pointed out. But you don't always need to use floats, especially not in your case. Plus here's an extra bonus if you ever need to place your form into a liquid layout page. It should proportion itself out equally on most screens that are wide or thin.
CSS
/*the blue rounded box*/
#bluebox {
padding:3% 5%;
margin:0 25%;
background:#d0dcea;
border:solid 1px #b7c2d2;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.fieldset-search {
text-align:center;
}
/*The white search bar*/
.input-search {
padding:5px;
margin:0;
width:50%;
vertical-align: baseline;
border: solid 1px #b7c2d2;
background: #fff;
outline: 0;
}
/*the jQuery Dropdown replacement*/
.list-search {
padding:4px;
margin:0 0 0 -5px;
}
/*the find button*/
.submit-search {
padding:4px 10px;
margin:0 0 0 -5px;
}
HTML
<div id="bluebox">
<div class="fieldset-search">
<input type="text" name="search" class="input-search">
<select name="list" class="list-search"><option></option></select>
<button type="search" class="submit-search">Go</button>
</div>
</div>
I'm working on styling my website forms and found a tutorial that seems to work up to a point... The tutorial includes code to have hover hints, and this code is causing things to get ugly. Instead of the fields all lining up under one another they seem to be attempting to position themselves one right after another and wrapping all the way down the window.
Here is the code element for the feature in question followed by the CSS...
HTML
<form id="defaultform" class="rounded" name="form2" method="post" action="<?php echo $editFormAction; ?>">
<h3>Contact Form</h3>
<div class="field">
<label for="hostess_fname">First Name:</label>
<input type="text" class="input" name="hostess_fname" value="" id="hostess_fname" />
<p class="hint">Enter your name.</p>
</div>
<div class="field">
<label for="email">Last Name:</label>
<input type="text" class="input" name="hostess_fname" value="" id="hostess_lname" />
<p class="hint">Enter your email.</p>
</div>
<input type="submit" value="Lookup Hostess" />
<input type="hidden" name="Lookup" value="form2" />
CSS
#defaultform {
width: 500px;
padding: 20px;
background: #f0f0f0;
overflow:auto;
/* Border style */
border: 1px solid #cccccc;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
/* Border Shadow */
-moz-box-shadow: 2px 2px 2px #cccccc;
-webkit-box-shadow: 2px 2px 2px #cccccc;
box-shadow: 2px 2px 2px #cccccc;
}
label {
font-family: Arial, Verdana;
text-shadow: 2px 2px 2px #ccc;
display: block;
float: left;
font-weight: bold;
margin-right:10px;
text-align: right;
width: 120px;
line-height: 25px;
font-size: 15px;
}
#defaultform.input{
font-family: Arial, Verdana;
font-size: 15px;
padding: 5px;
border: 1px solid #b9bdc1;
width: 300px;
color: #797979;
}
.hint{
display: none;
}
.field:hover .hint {
position: absolute;
display: block;
margin: -30px 0 0 455px;
color: #FFFFFF;
padding: 7px 10px;
background: rgba(0, 0, 0, 0.6);
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}
I just updated the code with more of the HTML from a shorter form that I was trying with the same CSS. I also added some more of the CSS code. I'm getting the same behavior. I'm still confused on selectors and how those are defined and stuff.
I see what you're doing now that you've added your code. It's a pretty simple fix, but hard to catch:
CSS
.field{
clear:both;
}
Here's the jsFiddle