This is my CSS code and it works fine on android and PC Browser but not Iphone
.button{
color: #fff !important;
text-transform: uppercase;
text-decoration: none;
background: #4A5D88 ;
padding: 5px 40px 5px 40px;
border-radius: 20px;
display: inline-block;
border: none;
transition: all 0.4s ease 0s;
}
.button:hover{
text-shadow: 0px 0px 6px rgba(255, 255, 255, 1);
-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
transition: all 0.4s ease 0s;
}
this is how it works every where but not on Iphone
Add this line and it should work normally.
-webkit-appearance: none;
Related
This hovering idea works fine when i use it saperately on a small single page, but when I use it on my project, its not working.
Here's the code:
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="WebRole1.WebForm4" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<style>
#sel>a: hover #span1 {
display: block;
}
#sel>a{
position: relative;
color: rgba(255,255,255,1);
text-decoration: none;
background-color: rgb(0, 148, 255);
font-family: 'Yanone Kaffeesatz';
font-weight: 700;
font-size: 3em;
display: block;
padding: 4px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 3px 10px 55px 14px rgba(51,39,51,1);
-moz-box-shadow: 3px 10px 55px 14px rgba(51,39,51,1);
box-shadow: 3px 10px 55px 14px rgba(51,39,51,1);
margin: 100px auto;
width: 160px;
text-align: center;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
top: 0px;
left: -1px;
}
#sel>a:active {
-webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
-moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
position: relative;
top: 6px;
}
</style>
<div id="sel">
<a href="webform1.aspx" >Private Album!</a>
Public Album!
</div>
<span id="span1">
Apple.
</span>
</asp:Content>
What i want is whenever I hover to, private album or public album, it should show Apple. Otherwise, nothing. But it keeps showing Apple on the lower left corner of the screen. What is wrong?
Your CSS selector is wrong.
Instead of this:
#sel > a:hover #span1
use this
#sel > a:hover + #span1
Selectors reference: http://www.w3schools.com/cssref/css_selectors.asp
And the "Apple" is still visible, because you should hide it from the beginning like this:
#span1 {display: none;}
So in my bootstrap.css I have:
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #555555;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
And in my own .css file that I loaded after bootstrap.css:
.form-control {
display: block;
width: 100%;
height: 45px;
padding: 6px 12px;
font-size: 27px;
line-height: 1.928571429;
color: #555555;
vertical-align: left;
background-color: #002b36;
border: 0px none #002b36;
border-radius: 4px;
-webkit-box-shadow: none 0 0px 1px rgba(0, 0, 0, 0.075);
box-shadow: none 0 0px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
Everything is overwritten except for the
-webkit-box-shadow: none 0 0px 1px rgba(0, 0, 0, 0.075);
box-shadow: none 0 0px 1px rgba(0, 0, 0, 0.075);
I can tell since if I change that snippet in bootstrap.css to match what I have in my own css file that it actually changes on the webpage. So for some reason, my own css overwrites everything except for those two lines about box-shadows, and I don't know why.
Try shorten it to valid CSS like:
-webkit-box-shadow: none;
box-shadow: none;
So this is the code I'm working on:
HTML
<div id="t_welcomesection">
<h1>Hello World!</h1>
<p>Lorem Ipsum.
<div class="morebtn">More >>
</div>
</p>
</div>
<!-- end of welcomesection -->
CSS
.morebtn {
color: #FFF;
background-color: rgba(219,87,5,1);
font-size: 17px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
-moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
width: 100px;
text-align: center;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
.morebtn:active {
color: #FFF;
-webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
-moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
}
#t_welcomesection {
float: left;
width: 800px;
text-align: justify;
padding: 0px 50px 30px 50px;
}
See working sample here
I want the button to be next to the text. I don't know what's wrong with the code I have. Help is much appreciated. Thanks.
#t_welcomesection p {
display: inline-block;
}
.morebtn {
display: inline-block;
}
You've got div (a block element) inside a p. Just use span instead of div:
Demo
You cannot have div nested inside a p tag as p can only hold inline elements, make your div a span and assign display: inline-block; to the span element
Demo
how do i make the search box in the center of the nav bar? you will see what i mean below with the image.. ill post my css code for the search box below the image ..
#advsearch {
}
#advsearch input[type="text"] {
background: url(/images/search-dark.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 12px Arial, Helvetica, Sans-serif;
color: #777;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#advsearch input[type="text"]:focus {
width: 200px;
}
thanks so much in advance :) if u want maybe we can work on my website together?
also here is a Js Fiddle just incase you need it dont mind the images not being there it should not make a diffrence
Here you need to modify some css code.
#cssmenu > ul > li > a {
color: #A0A0A0;
font-family: Verdana,'Lucida Grande';
font-size: 15px;
/*line-height: 70px;
padding: 0;*/
position: relative;
top: 7px;
transition: color 0.15s ease 0s;
}
Demo: http://jsfiddle.net/y5Fhc/8/
anchor in not needed in the li of search box and I have added a class in the li of search box to make it center of the nav bar.
css
li.search{
line-height:40px;
}
html
<li class='active search'><span>
<form method="get" action="/search" id="advsearch">
<input name="q" type="text" size="40" placeholder="Search..." />
</form>
</li>
jsFiddle File
I made a form for a site and all textboxes have rounded corners except the select drop down box. I made a rounded box style and it shows but the original square also shows behind it. Is there any way I can remove this so my is the only one that shows. I'll add the code
<td>Service Requested:
<select style="margin-left: 10px" name="service" tabindex="4">
<option value=" " selected="selected"> </option>
<option value="Residential Move">Residential Move*</option>
<option value="Commercial Move">Commercial Move*</option>
<option value="Storage Unit Loading">Storage Unit Loading</option>
<option value="Storage Unit Unloading">Storage Unit Unloading</option>
<option value="Furniture Consignment">Furniture Consignment</option>
<option value="Assembly/Removal">Assembly/Removal</option>
<option value="Landscaping">Landscaping</option>
<option value="Cleanout">Cleanout</option>
<option value="General Help">General Help</option>
</select>
</td>
and this is the entire css for the whole form. Just have at it
#searchbox {
padding-left: 190px;
padding-bottom:40px;
background: url(../images/border-dashed.gif) repeat-x left bottom;
}
#searchbox form {
margin: 0;
}
#searchbox table {
margin: 0;
}
#searchbox th, td {
text-align: left;
font-weight: normal;
color:#302f2f;
}
#searchbox .submitrow {
text-align: right;
}
#search {
}
#search input[type="text"] {
border: 2px solid #c1c2c3 ;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #302f2f;
width: 100px;
padding: 6px 15px 6px 15px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus {
width: 150px;
}
#search select {
border: 2px solid #c1c2c3 ;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #302f2f;
width: 200px;
padding: 6px 15px 6px 15px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search select:focus {
width: 250px;
}
#search textarea {
border: 2px solid #c1c2c3 ;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #302f2f;
width: 300px;
padding: 6px 15px 6px 15px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search textarea:focus {
}
.contactwrapper {width:auto; height:200px; overflow:hidden;}
.extra-wrap {width:800px; overflow:hidden;}
.formbtn {
background: url(../images/formbtns.png) no-repeat;
background-position: 0 bottom;
color: #f1f2ea;
display: block;
line-height: 28px;
float:right;
margin-left:450px;
margin-bottom:40px;
height: 30px;
width: 100px;
margin: 48px 10px;
outline: 0;
text-align: center;
text-decoration: none;
}
.formbtn:hover {
background-position: 0 top;
}
thanks
The ability to style select boxes is inconsistent across browsers. Some of them respond well to CSS styling and some don't, but if you really want to have completely consistent control over it and its behavior, you need to make a faux-select that is powered by javascript.
Check out the Select2 control, it's nice.
Styling to a select box is chosen mostly by the browser and is not very customizable without javascript besides using a background image.
Since jQuery UI 1.8 there has been an autocomplete control that has a combobox functionality which replaces a select control.
I found an alternative, but not sure how it will behave with all browsers. But if you change the border property to inherit it will do it. At least in Chrome
border: 2px inherit #c1c2c3 ;