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;
Related
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;
Is it possible to have a radio button use text to toggle without using id's or javascript? Could you use the 'class' tag instead? This is not a "you should use javascript or id's", but instead a is it possible to do this without them. Any help would be appreciated in resolving this.
Absolutely! There's nothing stopping you from using class selectors instead of ID selectors.
Here's a simple radio button that toggles text. It uses pure CSS, and makes use of classes:
.switch-field {
font-family: "Lucida Grande", Tahoma, Verdana, sans-serif;
padding: 40px;
overflow: hidden;
}
.switch-title {
margin-bottom: 6px;
}
.switch-field input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}
.switch-field label {
float: left;
}
.switch-field label {
display: inline-block;
width: 60px;
background-color: #e4e4e4;
color: rgba(0, 0, 0, 0.6);
font-size: 14px;
font-weight: normal;
text-align: center;
text-shadow: none;
padding: 6px 14px;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.switch-field label:hover {
cursor: pointer;
}
.switch-field input:checked + label {
background-color: #A5DC86;
-webkit-box-shadow: none;
box-shadow: none;
}
.switch-field label:first-of-type {
border-radius: 4px 0 0 4px;
}
.switch-field label:last-of-type {
border-radius: 0 4px 4px 0;
}
<form class="form">
<div class="switch-field">
<div class="switch-title">Is this awesome?</div>
<input type="radio" id="switch_left" name="switch_2" value="yes" checked/>
<label for="switch_left">Yes</label>
<input type="radio" id="switch_right" name="switch_2" value="no" />
<label for="switch_right">No</label>
</div>
</form>
Hope this helps! :)
I am kinda new to web designing. Trying to create a toggle iOS like button but the issue is with its appearance on different browsers. It looks different in different browsers. As I tested it it works properly on Chrome.
Can somebody help me to make it look same on all browsers? Sorry for the broken english?
jsfiddle Link : http://jsfiddle.net/racy2408/Let1y8yr/
Given below is CSS I tried:
body {
margin: 30px;
text-align: center;
}
input[type=checkbox],
input[type=radio] {
display: inline-block;
width: 50px;
height: 30px;
position: relative;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
box-shadow: inset 0px 5px 40px -13px rgba(0, 0, 0, 0.75);
-webkit-box-shadow: inset 0px 5px 40px -13px rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset 0px 5px 40px -13px rgba(0, 0, 0, 0.75);
-o-box-shadow: inset 0px 5px 40px -13px rgba(0, 0, 0, 0.75);
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-o-border-radius: 15px;
background-color: #fff;
padding: 1px;
margin: 0px;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transform: scale(1);
-webkit-transform: scale(1);
/*Adjust size here*/
-moz-transform: scale(1);
-o-transform: scale(1);
}
input[type=checkbox]:checked,
input[type=radio]:checked {
box-shadow: inset 0px 0px 0px 20px #53d76a, inset 0px 5px 40px -13px rgba(132, 132, 132, 1);
-webkit-box-shadow: inset 0px 0px 0px 20px #53d76a, inset 0px 5px 40px -13px rgba(132, 132, 132, 1);
-moz-box-shadow: inset 0px 0px 0px 20px #53d76a, inset 0px 5px 40px -13px rgba(132, 132, 132, 1);
-o-box-shadow: inset 0px 0px 0px 20px #53d76a, inset 0px 5px 40px -13px rgba(132, 132, 132, 1);
}
input[type=checkbox]:after,
input[type=radio]:after {
content: " ";
position: absolute;
width: 28px;
height: 28px;
cursor: pointer;
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-o-border-radius: 15px;
box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
-o-box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
background-color: #fff;
/* background-image: url(../images/toggle.png);
background-repeat: no-repeat;
background-size: contain; */
transition: all 0.2s ease-in 0.2s;
-webkit-transition: all 0.2s ease-in 0.2s;
-moz-transition: all 0.2s ease-in 0.2s;
-o-transition: all 0.2s ease-in 0.2s;
}
input[type="checkbox"]:checked:after,
input[type="radio"]:checked:after {
left: 23px;
}
input[type=checkbox]:focus,
input[type=checkbox]:active,
input[type=radio]:focus,
input[type=radio]:active {
outline: 0;
}
<h1>Checkbox :</h1>
<input type="checkbox" />
<input type="checkbox" checked />
<h1>Radio :</h1>
<input type="radio" name="group" />
<input type="radio" name="group" checked />
<input type="radio" name="group" />
inputs aren't supposed to be able to add before and after psuedo-elements because they aren't containers (e.g. an <input> can't have child elements).
There is some more information in the comment here: https://stackoverflow.com/a/4660434/4338477
You could add labels to get the same effect though (this works in Firefox and IE9+):
http://jsfiddle.net/8okjwLxx/2/
<h1>Checkbox :</h1>
<input id="checkbox1" type="checkbox" />
<label for="checkbox1"></label>
<input id="checkbox2" type="checkbox" checked />
<label for="checkbox2"></label>
<h1>Radio :</h1>
<input id="radio1" type="radio" name="group" />
<label for="radio1"></label>
<input id="radio2" type="radio" name="group" checked />
<label for="radio2"></label>
<input id="radio3" type="radio" name="group" />
<label for="radio3"></label>
body {
margin: 30px;
text-align: center;
}
input[type=checkbox],
input[type=radio]{
display: none;
}
input[type=checkbox] + label,
input[type=radio] + label {
display: inline-block;
width: 50px;
height: 30px;
position: relative;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
box-shadow: inset 0px 5px 40px -13px rgba(0, 0, 0, 0.75);
-webkit-box-shadow: inset 0px 5px 40px -13px rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset 0px 5px 40px -13px rgba(0, 0, 0, 0.75);
-o-box-shadow: inset 0px 5px 40px -13px rgba(0, 0, 0, 0.75);
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-o-border-radius: 15px;
background-color: #fff;
padding: 1px;
margin: 0px;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transform: scale(1);
-webkit-transform: scale(1); /*Adjust size here*/
-moz-transform: scale(1);
-o-transform: scale(1);
}
input[type=checkbox]:checked + label,
input[type=radio]:checked + label {
box-shadow: inset 0px 0px 0px 20px #53d76a, inset 0px 5px 40px -13px rgba(132, 132, 132, 1);
-webkit-box-shadow: inset 0px 0px 0px 20px #53d76a, inset 0px 5px 40px -13px rgba(132, 132, 132, 1);
-moz-box-shadow: inset 0px 0px 0px 20px #53d76a, inset 0px 5px 40px -13px rgba(132, 132, 132, 1);
-o-box-shadow: inset 0px 0px 0px 20px #53d76a, inset 0px 5px 40px -13px rgba(132, 132, 132, 1);
}
input[type=checkbox] + label:after,
input[type=radio] + label:after {
left: 0;
content: " ";
position: absolute;
width: 28px;
height: 28px;
cursor: pointer;
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-o-border-radius: 15px;
box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
-o-box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
background-color: #fff;
/* background-image: url(../images/toggle.png);
background-repeat: no-repeat;
background-size: contain; */
transition: all 0.2s ease-in 0.2s;
-webkit-transition: all 0.2s ease-in 0.2s;
-moz-transition: all 0.2s ease-in 0.2s;
-o-transition: all 0.2s ease-in 0.2s;
}
input[type=checkbox]:checked + label:after,
input[type=radio]:checked + label:after {
left: 23px;
}
input[type=checkbox]:focus,
input[type=checkbox]:active,
input[type=radio]:focus,
input[type=radio]:active {
outline: 0;
}
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 ;