I have unique id's for toggles being built dynamically within table rows and I got the css appropriately grabbing them using [attr*="checkbox"]; however, no matter which toggle I click only the top one toggles. I have 0 JS right now and I have no idea where to start with getting individual ones to toggle, since they're dynamically generated. I found how to set the attributes to true and false. But everything I have found online isn't straight forward.
<table class="table table-hover table-md ">
<thead>
<tr>
<td class="text-left tableHead">RoleId</td>
<td class="text-left tableHead">Role</td>
<td class="text-right tableHead">Delete</td>
</tr>
</thead>
#*--Table Body For Each to pull DB records--*#
<tbody>
#{int i = 0;}
#foreach (var role in Model.Roles)
{
<tr>
<td>#role.RoleID</td>
<td>#role.RoleName</td>
<td>
<input type="checkbox" name="checkbox" id="checkbox#(i)" class="ios-toggle"/>
<label for="checkbox#(i)" class="checkbox-label float-right"></label>
</td>
</tr>
i++;
}
</tbody>
</table>
css:
.ios-toggle, .ios-toggle:active {
position: absolute;
top: -5000px;
height: 0;
width: 0;
opacity: 0;
border: none;
outline: none;
}
.checkbox-label {
display: block;
position: relative;
/* padding: 10px; */
margin-bottom: 20px;
font-size: 12px;
line-height: 16px;
width: 35%;
height: 25px;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
background: #f8f8f8;
cursor: pointer;
}
.checkbox-label:before {
content: '';
display: block;
position: sticky;
z-index: 1;
line-height: 34px;
text-indent: 40px;
height: 25px;
width: 25px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
top: 0px;
left: 0px;
/* right: auto; */
background: white;
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,.2), 0 0 0 2px #dddddd;
-moz-box-shadow: 0 3px 3px rgba(0,0,0,.2),0 0 0 2px #dddddd;
box-shadow: 0 3px 3px rgba(0,0,0,.2), 0 0 0 2px #dddddd;
}
.checkbox-label:after {
content: attr(data-off);
display: block;
position: absolute;
z-index: 0;
top: 0;
left: -300px;
padding: 10px;
height: 100%;
width: 300px;
text-align: right;
color: #bfbfbf;
white-space: nowrap;
}
.ios-toggle:checked + .checkbox-label {
/*box-shadow*/
-webkit-box-shadow: inset 0 0 0 20px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
-moz-box-shadow: inset 0 0 0 20px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
box-shadow: inset 0 0 0 20px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
}
.ios-toggle:checked + .checkbox-label:before {
left: calc(100% - 36px);
/*box-shadow*/
-webkit-box-shadow: 0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3);
-moz-box-shadow: 0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3);
box-shadow: 0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3);
}
/* GREEN CHECKBOX */
[id*="checkbox"] + .checkbox-label {
/*box-shadow*/
-webkit-box-shadow: inset 0 0 0 0px rgba(19,191,17,1),0 0 0 2px #dddddd;
-moz-box-shadow: inset 0 0 0 0px rgba(19,191,17,1),0 0 0 2px #dddddd;
box-shadow: inset 0 0 0 0px rgba(19,191,17,1),0 0 0 2px #dddddd;
}
[id*="checkbox"]:checked + .checkbox-label {
/*box-shadow*/
-webkit-box-shadow: inset 0 0 0 18px rgba(0, 154, 68, 1),0 0 0 2px rgba(0, 154, 68, 1);
-moz-box-shadow: inset 0 0 0 18px rgba(0, 154, 68, 1),0 0 0 2px rgba(0, 154, 68, 1);
box-shadow: inset 0 0 0 18px rgba(0, 154, 68, 1),0 0 0 2px rgba(0, 154, 68, 1);
}
[id*="checkbox"]:checked + .checkbox-label:after {
color: #009A44 !important;
}
Not knowing the data from your model, I was able to make a makeshift table with your code. I changed your selector in your .css code from [id^="checkbox"] to "input:checkbox[id^='checkbox']". This will select your check boxes where their id's start with checkbox since it seems they all will. This also seems to select each individual checkbox as well. Hopefully this is a push in the right direction for you.
Working jsfiddle: https://jsfiddle.net/2kz1e5fd/
Related
I want to create triangle using CSS and want to fill color inside it using inset How to do that??? Please Answer....
*{
margin: 0;
padding: 0;
}
body{
background: linear-gradient(15deg, #00ffff, #004680);
background-position: cover;
background-repeat: no-repeat;
overflow: hidden;
width: 100vw;
height: 100vh;
}
.bubble{
position: absolute;
top: 40vh;
width: 150px;
height: 150px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 50%;
box-shadow: inset 0 0 10px #fff, inset -10px 10px 15px #020131,
inset 5px 5px 10px #960101, inset -5px 5px 20px #fff,
inset 15px -25px 20px #9224ed;
}
//I want to create triangle using CSS and want to fill color inside it using inset How to do //that??? Please Answer....
.bubble-two{
box-shadow: inset 0 0 10px #fff, inset -10px 10px 15px #06f3df,
inset 5px 5px 10px #f8e63e, inset -5px 5px 20px #fff,
inset 15px -25px 20px #ed24aa;
}
.bubble-three {
box-shadow: inset 0 0 10px #010631, inset -10px 10px 15px #1512f3,
inset 5px 5px 10px #f8e63e, inset -5px 5px 20px #fff,
inset 15px -25px 20px #33114e;
}
.bubble-four{
box-shadow: inset 0 0 10px #8b0101, inset -10px 10px 15px #f6f6fc,
inset 5px 5px 10px #81f733, inset -5px 5px 20px #fff,
inset 15px -25px 20px #0b0822;
}
.bubble-five{
box-shadow: inset 0 0 10px #fff, inset -10px 10px 15px #100dee,
inset 5px 5px 10px #f7a120, inset -5px 5px 20px #fff,
inset 15px -25px 20px #ed24c1;
}
.score-board{
background: #fff;
width: 300px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px 20px 0 0;
position: absolute;
bottom: 0;
left:calc(50% - 150px) ;
}
.loser {
display: none;
}
.winner {
display: none;
}
.main-game{
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
button.start-btn{
font-size: 20px;
border: none;
margin-top: 8px;
border-radius: 30px;
font-weight: bold;
height: 30px;
width: 5%;
margin: 8px auto;
}
.shadow{
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.6);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
position: relative;
}
.total-score{
background: #fff;
padding: 10px 100px 40px;
border-radius: 10px;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}
<div class="bubble bubble-one"></div>
I want to create triangle using CSS and want to fill color inside it using inset How to do that??? Please Answer....
The circle is formed by using border-radius of 50%.
If you remove that and instead put in a clip-path which has value of a polygon with 3 coordinates then you get a triangle, as in this snippet.
Obviously you will want to experiment with how the colors are placed and also what angle and size/ratios you want to apply to the various triangles.
* {
margin: 0;
padding: 0;
}
body {
background: linear-gradient(15deg, #00ffff, #004680);
background-position: cover;
background-repeat: no-repeat;
overflow: hidden;
width: 100vw;
height: 100vh;
}
.bubble {
position: absolute;
top: 40vh;
width: 150px;
height: 150px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
/*border-radius: 50%; */
box-shadow: inset 0 0 10px #fff, inset -10px 10px 15px #020131, inset 5px 5px 10px #960101, inset -5px 5px 20px #fff, inset 15px -25px 20px #9224ed;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.bubble-two {
box-shadow: inset 0 0 10px #fff, inset -10px 10px 15px #06f3df, inset 5px 5px 10px #f8e63e, inset -5px 5px 20px #fff, inset 15px -25px 20px #ed24aa;
}
.bubble-three {
box-shadow: inset 0 0 10px #010631, inset -10px 10px 15px #1512f3, inset 5px 5px 10px #f8e63e, inset -5px 5px 20px #fff, inset 15px -25px 20px #33114e;
}
.bubble-four {
box-shadow: inset 0 0 10px #8b0101, inset -10px 10px 15px #f6f6fc, inset 5px 5px 10px #81f733, inset -5px 5px 20px #fff, inset 15px -25px 20px #0b0822;
}
.bubble-five {
box-shadow: inset 0 0 10px #fff, inset -10px 10px 15px #100dee, inset 5px 5px 10px #f7a120, inset -5px 5px 20px #fff, inset 15px -25px 20px #ed24c1;
}
.score-board {
background: #fff;
width: 300px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px 20px 0 0;
position: absolute;
bottom: 0;
left: calc(50% - 150px);
}
.loser {
display: none;
}
.winner {
display: none;
}
.main-game {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
button.start-btn {
font-size: 20px;
border: none;
margin-top: 8px;
border-radius: 30px;
font-weight: bold;
height: 30px;
width: 5%;
margin: 8px auto;
}
.shadow {
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.6);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
position: relative;
}
.total-score {
background: #fff;
padding: 10px 100px 40px;
border-radius: 10px;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}
<div class="bubble bubble-one"></div>
How do i translate tab 1 Neumorphic css to tab 2 when I click on tab 2 like the example below like sliding from tab 1 to tab 2?
https://dribbble.com/shots/10805627-Neumorphic-Tab
import styled from 'styled-components';
const PostsTabWrapper = styled.div`
.react-tabs {
width: 100%;
font-size: 20px;
font-weight: 500;
#media (max-width: 768px) {
font-size: 16px;
}
}
.react-tabs__tab-list {
margin: 0 25px 20px 25px;
background: 3af740;
border-radius: 10px;
padding: 10px;
box-shadow:
inset 0 0 15px rgba(55, 84, 170,0),
inset 0 0 20px rgba(255, 255, 255,0),
7px 7px 15px rgba(55, 84, 170,.15),
-7px -7px 20px rgba(255, 255, 255,1),
inset 0px 0px 4px rgba(255, 255, 255,.2);
}
.react-tabs__tab {
display: inline-block;
position: relative;
list-style: none;
padding: 16px 24px;
cursor: pointer;
}
.react-tabs__tab--selected {
border-radius: 10px;
box-shadow:
inset 7px 7px 15px rgba(55, 84, 170,.15),
inset -7px -7px 20px rgba(255, 255, 255,1),
0px 0px 4px rgba(255, 255, 255,.2);
transition: 0.4s ease-in-out;
}
.react-tabs__tab--disabled {
// color: GrayText;
cursor: default;
}
.react-tabs__tab:focus {
// box-shadow: 0 0 5px hsl(208, 99%, 50%);
// border-color: hsl(208, 99%, 50%);
// outline: none;
}
.react-tabs__tab:focus:after {
content: "";
position: absolute;
height: 5px;
left: -4px;
right: -4px;
bottom: -5px;
// background: #fff;
}
.react-tabs__tab-panel {
display: none;
}
.react-tabs__tab-panel--selected {
display: block;
}
`;
export default PostsTabWrapper
check when you click on the input then you do translateX(distance)
for exemple :
input{
&.active {
background: #7395D2;
color: #7395D2;
#swipe{
transform: translateX(120px);
background: #C6CEF6;
}
}
}
I want to create simple donation option using CSS/JS and HTML.
I have this photo of how it supposed to look like:
Plus button should increase donation, while it's increasing, the progressbar should be changing too. Same with minus button with decreasing value.
I thought that it would be easier, but I have problems on the beginning,
The main problem for me is positioning elements, so I would apprecieate if someone give me instructions or send me to a good tutorial about positioning. I am total beginner.
Here's where I stuck for now:
var donate = parseInt(document.getElementById(donate_nr).innerHTML);
function increaseDonate() {
if (donate < 750) {
donate += 10;
document.getElementById("donate_nr").innerHTML = donate;
} else document.getElementById("donate_nr").innerHTML = donate + "Thank you, that's the maximum you can donate.";
}
function decreaseDonate() {
if (donate > 0) {
donate -= 10;
document.getElementById("donate_nr").innerHTML = donate;
}
}
.minButton {
background: #17f8b2;
width: auto;
cursor: pointer;
font-size: 3.4em;
font-family: 'coc';
text-align: center;
color: #fff;
line-height: 33px;
height: 40px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid #907d10;
text-shadow: 0 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.plusButton {
background: #17f8b2;
width: auto;
cursor: pointer;
font-size: 3.4em;
font-family: 'coc';
text-align: center;
color: #fff;
line-height: 33px;
height: 40px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid #907d10;
}
.col1{
float:left;
width: 10%;
margin: 10px 10px 10px 10px;
position:f
}
.col3{
float:right;
width:10%;
}
.divContainer{
background: linear-gradient(to bottom, #007ead 0%,#006188 100%);
border-top: 2px solid #000;
border-right: 2px solid #000;
border-left: 2px solid #000;
}
.donateValue{
text-shadow: 0 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
color: #fff;
letter-spacing: 2px;
font-size: 3.6em;
padding: 17px 20px 10px 80px;
font-family: 'coc';
line-height: 1em;
}
<h1>
Your Donation:
</h1>
<br>
<div class=columnWrapper>
<div class="col1">
<div class="minButton" onclick="decreaseDonate()">-</div></div>
<div class="col2">
<div class="divContainer">
<div id="donate_nr" class="donateValue">10
</div>
</div>
</div>
<div class="col3">
<div class="plusButton" onclick="increaseDonate()">+</div></div>
</div>
Instead of float you can use flex for the layout you can find a complete tutorial on mdn flexbox
var donate = parseInt(document.getElementById('donate_nr').innerHTML);
function increaseDonate() {
if (donate < 750) {
donate += 10;
document.getElementById("donate_nr").innerHTML = donate;
} else document.getElementById("donate_nr").innerHTML = donate + "Thank you, that's the maximum you can donate.";
}
function decreaseDonate() {
if (donate > 0) {
donate -= 10;
document.getElementById("donate_nr").innerHTML = donate;
}
}
.minButton {
background: #17f8b2;
width: auto;
cursor: pointer;
font-size: 3.4em;
font-family: 'coc';
text-align: center;
color: #fff;
line-height: 33px;
height: 50px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid #907d10;
text-shadow: 0 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.plusButton {
background: #17f8b2;
width: auto;
cursor: pointer;
font-size: 3.4em;
font-family: 'coc';
text-align: center;
color: #fff;
line-height: 45px;
height: 50px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid #907d10;
text-shadow: 0 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.columnWrapper{
display:flex;
align-items:center;
}
.col1{
width: 10%;
padding:5px
}
.col2{
width:90%;
}
.col3{
width:10%;
padding:5px
}
.divContainer{
background: linear-gradient(to bottom, #007ead 0%,#006188 100%);
border-top: 2px solid #000;
border-right: 2px solid #000;
border-left: 2px solid #000;
}
.donateValue{
text-shadow: 0 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
color: #fff;
letter-spacing: 2px;
font-size: 3.6em;
padding: 17px 20px 10px 80px;
font-family: 'coc';
line-height: 1em;
}
<h1>
Your Donation:
</h1>
<br>
<div class=columnWrapper>
<div class="col1">
<div class="minButton" onclick="decreaseDonate()">-</div>
</div>
<div class="col2">
<div class="divContainer">
<div id="donate_nr" class="donateValue">10
</div>
</div>
</div>
<div class="col3">
<div class="plusButton" onclick="increaseDonate()">+</div>
</div>
</div>
You will need to create an extra div for the progress bar which has position: absolute within your divContainer, and you will need to give this a position: relative value to allow the child to be absolutely positioned within it. Then you can add a line of code to your JS functions to give the progress bar a percentage width whenever the donation amount changes.
<div class="divContainer">
<div id="donate_nr" class="donateValue">10</div>
<div class="progressBar"></div>
</div>
// CSS:
.divContainer {
position: relative;
// etc.
}
.progressBar {
position: absolute;
left: 0;
bottom: 0;
height: 20px;
background-color: red;
}
// JS:
// In both `increaseDonate()` and `decreaseDonate()`, call this at the end
// to set the width of the progress bar by percentage:
const progressBar = document.querySelector('.progressBar');
progressBar.style.width = `${donate / 750 * 100}%;`
So I have a script that uses the typeahead to pull up data from my database:
<script type="text/javascript">
$(document).ready(function() {
$("#navPersonSearch").typeahead({
name: 'people',
remote: 'name_autocomplete/?q=%QUERY'
})
.keydown(function(e) {
if (e.keyCode === 13) {
$("form").trigger('submit');
}
});
});
</script>
This is what my form looks like without the script
And this is what it looks like with the script:
This is the html on the page (using bootstrap 3):
<div class="jumbotron">
<div class="container">
<h1 align="center">Search</h1>
<div class="row">
<div class="col-lg-12">
<form id="search_form" align="center" action="/search/" class="form-inline" method ="get" role="form">
<input id="navPersonSearch" class="input form-control" type="text" name="q"
placeholder="Search for Actor/Actress"
autocomplete="off" >
</form>
</div> <!-- /.col -->
</div> <!-- /.row -->
</div> <!-- /.container -->
</div> <!-- /.jumbotron -->
I'm not sure why the script is messing with my form's layout.
After some research, it looks like this is a known issue with Bootstrap 3: https://github.com/twitter/typeahead.js/issues/378
People have made some fixes to it, but the fixes aren't completely universal, you'd have to tweak the properties yourself to actually get it to work properly. The fix that I'm starting off with is this: http://jsfiddle.net/ragulka/Dy9au/1/
.twitter-typeahead {
width: 100%;
position: relative;
}
.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
margin: 0;
width: 100%;
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;
}
.has-warning .twitter-typeahead .tt-query,
.has-warning .twitter-typeahead .tt-hint {
border-color: #c09853;
-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);
}
.has-error .twitter-typeahead .tt-query,
.has-error .twitter-typeahead .tt-hint {
border-color: #b94a48;
-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);
}
.has-success .twitter-typeahead .tt-query,
.has-success .twitter-typeahead .tt-hint {
border-color: #468847;
-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);
}
.twitter-typeahead .tt-query:focus,
.twitter-typeahead .tt-hint:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.has-warning .twitter-typeahead .tt-query:focus,
.has-warning .twitter-typeahead .tt-hint:focus {
border-color: #a47e3c;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
}
.has-error .twitter-typeahead .tt-query:focus,
.has-error .twitter-typeahead .tt-hint:focus {
border-color: #953b39;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
}
.has-success .twitter-typeahead .tt-query:focus,
.has-success .twitter-typeahead .tt-hint:focus {
border-color: #356635;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
}
.twitter-typeahead .tt-hint {
color: #a1a1a1;
z-index: 1;
border: 1px solid transparent;
}
.twitter-typeahead .tt-query {
z-index: 2;
}
.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
}
.twitter-typeahead .input-sm.tt-query,
.twitter-typeahead .hint-sm.tt-hint {
border-radius: 3px;
}
.twitter-typeahead .input-lg.tt-query,
.twitter-typeahead .hint-lg.tt-hint {
border-radius: 6px;
}
.input-group .twitter-typeahead:first-child .tt-query,
.input-group .twitter-typeahead:first-child .tt-hint {
border-radius: 4px 0 0 4px !important;
}
.input-group .twitter-typeahead:last-child .tt-query,
.input-group .twitter-typeahead:last-child .tt-hint {
border-radius: 0 4px 4px 0 !important;
}
.input-group.input-group-sm .twitter-typeahead:first-child .tt-query,
.input-group.input-group-sm .twitter-typeahead:first-child .tt-hint {
border-radius: 3px 0 0 3px !important;
}
.input-group.input-group-sm .twitter-typeahead:last-child .tt-query,
.input-group.input-group-sm .twitter-typeahead:last-child .tt-hint {
border-radius: 0 3px 3px 0 !important;
}
.input-sm.tt-query,
.hint-sm.tt-hint,
.input-group.input-group-sm .tt-query,
.input-group.input-group-sm .tt-hint {
height: 30px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
}
.input-group.input-group-lg .twitter-typeahead:first-child .tt-query,
.input-group.input-group-lg .twitter-typeahead:first-child .tt-hint {
border-radius: 6px 0 0 6px !important;
}
.input-group.input-group-lg .twitter-typeahead:last-child .tt-query,
.input-group.input-group-lg .twitter-typeahead:last-child .tt-hint {
border-radius: 0 6px 6px 0 !important;
}
.input-lg.tt-query,
.hint-lg.tt-hint,
.input-group.input-group-lg .tt-query,
.input-group.input-group-lg .tt-hint {
height: 45px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
}
.tt-dropdown-menu {
width: 100%;
min-width: 160px;
margin-top: 2px;
padding: 5px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.tt-suggestion {
display: block;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
color: #fff;
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
.tt-suggestion.tt-is-under-cursor a {
color: #fff;
}
.tt-suggestion p {
margin: 0;
}
I've made a navigation bar/menu for my website, and I have customised the colors in the CSS. It works fine on IE, Chrome and Firefox. But when it comes to Safari, the navigation bar shows in its default colors! If anyone can help me with this, I would appreciate it greatly.
Internet Explorer, Firefox, Chrome:
http://tinypic.com/view.php?pic=2gtygrc&s=5
Safari:
http://i39.tinypic.com/2eltloi.png
The HTML:
<li>Hjem</li>
<li>Portfolio</li>
<li>Om</li>
<li>Andet</li>
<li>Kontakt</li>
The CSS:
nav ul {
margin: 80px 0 20px 0;
padding: 0em;
float: left;
list-style: none;
background: #1A1A1A;
background: rgba(26,26,26,.2);
-moz-border-radius: .5em;
-webkit-border-radius: .5em;
border-radius: .5em;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
-webkit-box-shadow: 0 1px 0 rgba(26,26,26,.2), 0 2px 1px rgba(0,0,0,.8) inset;
box-shadow: 0 1px 0 rgba(26,26,26,.2), 0 2px 1px rgba(0,0,0,.8) inset;
}
nav li {
float:left;
}
nav a {
float:left;
padding: .8em 1.5em;
text-decoration: none;
color: #ffffff;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
font: bold 1.1em/1 'trebuchet MS', Arial, Helvetica;
letter-spacing: 1px;
text-transform: uppercase;
border-width: 1px;
border-style: solid;
border-color: #d6d6d6 #d6d6d6 #d6d6d6 #d6d6d6;
background: #000000;
background: -moz-linear-gradient(#f5f5f5, #c1c1c1);
background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#c1c1c1));
background: -webkit-linear-gradient(#f5f5f5, #c1c1c1);
background: -o-linear-gradient(#f5f5f5, #c1c1c1);
background: -ms-linear-gradient(#f5f5f5, #c1c1c1);
background: linear-gradient(#484747, #2c2c2c);
}
nav a:hover, nav a:focus {
outline: 0;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.2);
background: #000000;
background: -moz-linear-gradient(#fac754, #f8ac00);
background: -webkit-gradient(linear, left top, left bottom, from(#fac754), to(#f8ac00));
background: -webkit-linear-gradient(#fac754, #f8ac00);
background: -o-linear-gradient(#f5f5f5, #f5f5f5);
background: -ms-linear-gradient(#f5f5f5, #ff0000);
background: linear-gradient(#e20000, #720000);
}
nav a:active {
-moz-box-shadow: 0 0 5px 5px rgba(0,0,0,.3) inset;
-webkit-box-shadow: 0 0 5px 5px rgba(0,0,0,.3) inset;
box-shadow: 0 0 5px 5px rgba(0,0,0,.3) inset;
}
nav li:first-child a {
border-left: 0;
-moz-border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}
nav li:last-child a {
border-right: 0;
-moz-border-radius: 0 4px 4px 0;
-webkit-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}
}
nav ul {
margin: 80px 0 20px 0;
padding: 0em;
float: left;
list-style: none;
background: #1A1A1A;
background: rgba(26,26,26,.2);
-moz-border-radius: .5em;
-webkit-border-radius: .5em;
border-radius: .5em;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
-webkit-box-shadow: 0 1px 0 rgba(26,26,26,.2), 0 2px 1px rgba(0,0,0,.8) inset;
box-shadow: 0 1px 0 rgba(26,26,26,.2), 0 2px 1px rgba(0,0,0,.8) inset;
}
You've got background twice once as hex the other as rgba, I think you only need one.