I want to change the colour of my toggle background as soon as checked. Unfortunately the attempt I tried does not work. I do not want to change the indicator colour! I am aware of the fact, that as soon as I exclude <input.. from the div, it works. But if I do so the animation doesn´t work any longer. Which would require a huge amount of work in my actually project.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Toggle color</title>
<!-- d3.js framework -->
<script src="https://d3js.org/d3.v6.js"></script>
<!-- fontawesome stylesheet https://fontawesome.com/ -->
<script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>
</head>
<style>
.toggle {
position: absolute;
height: 30px;
width: 60px;
border-radius: 15px;
overflow: hidden;
cursor: pointer;
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset,
-4px -4px 4px 0px #ffffff inset;
}
.toggle-state {
display: none;
}
.indicator {
height: 100%;
width: 200%;
background: #ecf0f3;
border-radius: 15px;
transform: translate3d(-75%, 0, 0);
transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6;
}
.toggle-state:checked ~ .indicator {
transform: translate3d(25%, 0, 0);
}
.toggle-state:checked + .toggle {
background-color: greenyellow;
}
</style>
<body>
<label>
<div class="toggle">
<input class="toggle-state" type="checkbox" checked/>
<div class="indicator"></div>
</div>
</label>
</body>
</html>
Not the best answer tho, but this is best I can do without JS, just play round and improve CSS here and there, it will be fine.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Toggle color</title>
<!-- d3.js framework -->
<script src="https://d3js.org/d3.v6.js"></script>
<!-- fontawesome stylesheet https://fontawesome.com/ -->
<script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>
</head>
<style>
.toggle {
position: absolute;
height: 30px;
width: 60px;
border-radius: 15px;
overflow: hidden;
cursor: pointer;
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset,
-4px -4px 4px 0px #ffffff inset;
}
.toggle-background {
position: absolute;
height: 30px;
width: 60px;
border-radius: 15px;
overflow: hidden;
cursor: pointer;
background-color: red;
transition: 0.4s;
}
.toggle-state {
display: none;
}
.indicator {
height: 100%;
width: 200%;
background: #ecf0f3;
border-radius: 15px;
transform: translate3d(-75%, 0, 0);
transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
box-shadow:
-8px -4px 8px 0px #95f700,
8px 4px 12px 0px darkred;
}
.toggle-state:checked ~ .indicator {
transform: translate3d(25%, 0, 0);
}
.toggle-state:checked + .toggle {
background-color: greenyellow;
}
.toggle-state:checked ~ .toggle-background {
background-color: greenyellow;
}
</style>
<body>
<label>
<div class="toggle">
<input class="toggle-state" type="checkbox" checked/>
<div class="toggle-background">
</div>
<div class="indicator"></div>
</div>
</label>
</body>
</html>
You can use some JS code for listening the checked event of the checkbox,
create two different style class if checked or unchecked
like bellow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Toggle color</title>
<!-- d3.js framework -->
<script src="https://d3js.org/d3.v6.js"></script>
<!-- fontawesome stylesheet https://fontawesome.com/ -->
<script
src="https://kit.fontawesome.com/39094309d6.js"
crossorigin="anonymous"
></script>
</head>
<style>
.toggle {
position: absolute;
height: 30px;
width: 60px;
border-radius: 15px;
overflow: hidden;
cursor: pointer;
box-shadow: -8px -4px 8px 0px #ffffff, 8px 4px 12px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset, -4px -4px 4px 0px #ffffff inset;
}
.toggle-state {
display: none;
}
.indicator {
height: 100%;
width: 200%;
background: #ecf0f3;
border-radius: 15px;
transform: translate3d(-75%, 0, 0);
transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
box-shadow: -8px -4px 8px 0px #ffffff, 8px 4px 12px 0px #d1d9e6;
}
.green {
background-color: greenyellow;
}
.black {
background-color: black;
}
.toggle-state:checked ~ .indicator {
transform: translate3d(25%, 0, 0);
}
.toggle-state:checked > .indicator {
background-color: greenyellow;
}
</style>
<body>
<label>
<div class="toggle">
<input id="mycheckbox" class="toggle-state" type="checkbox" />
<div id="indicateit" class="indicator"></div>
</div>
</label>
<script type="text/javascript">
var cb = document.getElementById("mycheckbox");
cb.addEventListener("change", function (e) {
console.log("Changed ");
if (this.checked) {
document.getElementById("indicateit").classList.remove("black");
document.getElementById("indicateit").classList.add("green");
} else {
document.getElementById("indicateit").classList.remove("green");
document.getElementById("indicateit").classList.add("black");
}
});
</script>
</body>
</html>
Could this work for you? I haven't tried it on multiple buttons...
Basically, just added an onchange event to your input. It calls a function that gets the input's parent, gets --onColor and --offColor variables from the CSS (.toggle class) and sets the background.
Note: If you decide to use this, you'll probably want to modify the CSS a bit to make the shadows look better and maybe add a transition to the color change.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Toggle color</title>
<!-- d3.js framework -->
<script src="https://d3js.org/d3.v6.js"></script>
<!-- fontawesome stylesheet https://fontawesome.com/ -->
<script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>
</head>
<style>
.toggle {
position: absolute;
height: 30px;
width: 60px;
border-radius: 15px;
overflow: hidden;
cursor: pointer;
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset,
-4px -4px 4px 0px #ffffff inset;
--onColor:green;
--offColor:red;
}
.toggle-state {
display: none;
}
.indicator {
height: 100%;
width: 200%;
background: #ecf0f3;
border-radius: 15px;
transform: translate3d(-75%, 0, 0);
transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6;
}
.toggle-state:checked ~ .indicator {
transform: translate3d(25%, 0, 0);
}
.toggle-state:checked + .toggle {
background-color: greenyellow;
}
</style>
<script>
function changeToggleBg(el) {
const toggle = el.parentElement;
let onColor = getComputedStyle(toggle).getPropertyValue('--onColor');
let offColor = getComputedStyle(toggle).getPropertyValue('--offColor');
toggle.style.backgroundColor = (toggle.style.backgroundColor == offColor.replace(' ','')) ? onColor : offColor;
}
</script>
<body>
<label>
<div class="toggle">
<input class="toggle-state" type="checkbox" onchange="changeToggleBg(this)" checked/>
<div class="indicator"></div>
</div>
</label>
</body>
</html>
Related
I would like to reproduce the following item in HTML/CSS:
The icon is actually from font awesome.
Here is what I achieved so far:
https://jsfiddle.net/0Lewug6p/1/
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css2?family=Raleway&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<div class="search__filters__option">
<div class="filter__icon"><i class="fas fa-dog"></i></div>
Animaux autorisés
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Raleway", sans-serif;
}
.search__filters__option {
display: flex;
justify-content: flex-start;
align-items: center;
padding-right: 15px;
border-bottom: 2px solid #f2f2f2;
border-top: 2px solid #f2f2f2;
border-right: 2px solid #f2f2f2;
text-align: center;
border-radius: 20px;
font-weight: bold;
margin-right: 10px;
}
.search__filters__option:hover {
background-color: #deebff;
color: #0065fc;
cursor: pointer;
}
.filter__icon {
margin-right: 10px;
height: 35px;
width: 35px;
border-radius: 50%;
color: #0065fc;
background-color: #deebff;
display: flex;
justify-content: center;
align-items: center;
}
I have two issues concerning my code:
1- It doesn't perfectly match what's in the image, (For example, the colored circle doesn't have the right size).
2- I don't know if my code is clean, as I'm still pretty new to CSS and wanna learn best practices.
Thanks in advance for your help and explanations!
Your code looks good. Instead of your border definitions, you can use box-shadow:inset like this:
.search__filters__option {
box-sizing: border-box;
-webkit-box-shadow: inset 0px 0px 0px 2px #f2f2f2;
-moz-box-shadow: inset 0px 0px 0px 2px #f2f2f2;
box-shadow: inset 0px 0px 0px 2px #f2f2f2;
}
Also described placing-border-inside-of-div-and-not-on-its-edge.
Demo: https://jsfiddle.net/pr6htj01/
For more opacity, use the rgb notation for the color which supports an opacity value as last parameter and/or a darker color:
-webkit-box-shadow: inset 0px 0px 0px 2px rgba(128, 128, 128, 0.2);
-moz-box-shadow: inset 0px 0px 0px 2px rgba(128, 128, 128, 0.2);
box-shadow: inset 0px 0px 0px 2px rgba(128, 128, 128, 0.2);
Demo: https://jsfiddle.net/z7b6ey19/
I got a custom HTML-object and every way I tried to center the class, it failed. Does anybody have an idea? Kind regards.
I tried . Other objects ere centered, only this one wasn't. I tried margin: 0px auto. I tried . My custom object keeps left-aligned. I think there could be an attribute
.switch-mode {
display: flex;
margin-bottom: 36px;
overflow: hidden;
}
.switch-mode input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}
.switch-mode label {
background-color: #e4e4e4;
color: rgba(0, 0, 0, 0.6);
font-size: 14px;
line-height: 1;
text-align: center;
padding: 8px 16px;
margin-right: -1px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
transition: all 0.1s ease-in-out;
}
.switch-mode label:hover {
cursor: pointer;
}
.switch-mode input:checked+label {
background-color: #C23434;
box-shadow: none;
}
.switch-mode label:first-of-type {
border-radius: 4px 0 0 4px;
}
.switch-mode label:last-of-type {
border-radius: 0 4px 4px 0;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="switch-mode">
<input type="radio" id="radio-open" name="mode" />
<label for="radio-open">OPEN</label>
<input type="radio" id="radio-auto" name="mode" />
<label for="radio-auto">AUTO</label>
<input type="radio" id="radio-close" name="mode" />
<label for="radio-close">CLOSE</label>
</div>
</body>
</html>
Your container is what needs to be centered, not the items within it. The addition is justify-content: center; within the .switch-mode class.
.switch-mode {
display: flex;
margin-bottom: 36px;
overflow: hidden;
justify-content: center;
}
.switch-mode input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}
.switch-mode label {
background-color: #e4e4e4;
color: rgba(0, 0, 0, 0.6);
font-size: 14px;
line-height: 1;
text-align: center;
padding: 8px 16px;
margin-right: -1px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
transition: all 0.1s ease-in-out;
}
.switch-mode label:hover {
cursor: pointer;
}
.switch-mode input:checked+label {
background-color: #C23434;
box-shadow: none;
}
.switch-mode label:first-of-type {
border-radius: 4px 0 0 4px;
}
.switch-mode label:last-of-type {
border-radius: 0 4px 4px 0;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="switch-mode">
<input type="radio" id="radio-open" name="mode" />
<label for="radio-open">OPEN</label>
<input type="radio" id="radio-auto" name="mode" />
<label for="radio-auto">AUTO</label>
<input type="radio" id="radio-close" name="mode" />
<label for="radio-close">CLOSE</label>
</div>
</body>
</html>
On .switch-mode, you have used flex layout. So add justify-content: center on .switch-mode class and it will be aligned on center position.
.switch-mode {
display: flex;
margin-bottom: 36px;
overflow: hidden;
justify-content: center;
}
.switch-mode input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}
.switch-mode label {
background-color: #e4e4e4;
color: rgba(0, 0, 0, 0.6);
font-size: 14px;
line-height: 1;
text-align: center;
padding: 8px 16px;
margin-right: -1px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
transition: all 0.1s ease-in-out;
}
.switch-mode label:hover {
cursor: pointer;
}
.switch-mode input:checked+label {
background-color: #C23434;
box-shadow: none;
}
.switch-mode label:first-of-type {
border-radius: 4px 0 0 4px;
}
.switch-mode label:last-of-type {
border-radius: 0 4px 4px 0;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="switch-mode">
<input type="radio" id="radio-open" name="mode" />
<label for="radio-open">OPEN</label>
<input type="radio" id="radio-auto" name="mode" />
<label for="radio-auto">AUTO</label>
<input type="radio" id="radio-close" name="mode" />
<label for="radio-close">CLOSE</label>
</div>
</body>
</html>
how do I align my red div element to the top of my button? I have tried to use position: absolute; top: 0; but that just aligns my red div to the top of the page, not the top of the button. originally, I was using a picture not a red div but since I'm running it in a code snippet I can't use the picture.
body {
padding: 50px;
}
button {
transition: transform 0.1s;
cursor: pointer;
height: 200px;
width: 320px;
border-style: none;
outline-style: none;
color: none;
}
button:hover {
transform:scale(1.03,1.03);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
font-size: 30px;
color: #ffffff;
text-align: left;
}
div {
width: 310px;
height: 170px;
background: red;
background-image: url(netflix\ black\ logo.png);
background-size: cover;
}
<html>
<head>
<title>shop.shop</title>
<link rel="stylesheet" href="shop.css">
</head>
<body>
<form action="https://netflix.com/" target="_blank">
<button type="submit">
<div>
</div>
<!---p>visit netflix and stuff </p>-->
</button>
</form>
</body>
</html>
In order to control the positioning of child elements, the parent is given a position property. Often the element is given aposition:relative.
This allows for the child element to be positioned absolute and forced into a position.
position:absolute;
top:0;
There are other ways to accomplish it with flexbox. I often us this link as reference:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
body {
padding: 50px;
}
button {
transition: transform 0.1s;
cursor: pointer;
height: 200px;
width: 320px;
border-style: none;
outline-style: none;
color: none;
position:relative;
}
button:hover {
transform:scale(1.03,1.03);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
font-size: 30px;
color: #ffffff;
text-align: left;
}
div {
width: 310px;
height: 170px;
background: red;
background-image: url(netflix\ black\ logo.png);
background-size: cover;
position:absolute;
top:0;
}
<html>
<head>
<title>shop.shop</title>
<link rel="stylesheet" href="shop.css">
</head>
<body>
<form action="https://netflix.com/" target="_blank">
<button type="submit">
<div>
</div>
<!---p>visit netflix and stuff </p>-->
</button>
</form>
</body>
</html>
body{
background-color: black;
margin-top: 45px;
}
.backdrop {
background: url(../images/header.JPG) center;
background-size: contain;
margin: auto;
margin-top: 185px;
width: 85vw;
}
.text {
text-shadow: 0 0 9px white;
color: white;
border: 4px solid;
background: rgb(59, 2, 6);
mix-blend-mode:multiply;
font: bolder 10vw 'arial';
text-align: center;
margin:0;
animation: glow 3s infinite;
}
#keyframes glow {
0% {
text-shadow: 0 0 10px white;
}
15% {
text-shadow: 2px 2px 10px rgba(255, 255, 255, 1),
-2px -2px 10px rgba(255, 255, 255, 1);
}
30% {
text-shadow: 2px 2px 4px rgba(255, 255, 255, .7),
-2px -2px 4px rgba(255, 255, 255, .7);
}
}
ul li {
float: left;
list-style: none;
margin-right: 1em;
}
li a {
color: #544738;
text-decoration: none;
float: left;
font-size: 25px;
padding: 10px;
padding-top: 30px;
margin-left: 155px;
}
li a:hover {
color: #740001;
}
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>About me</h1>
</body>
</html>
----------------------------------------------------------------
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Major</h1>
</body>
</html>
--------------------------------------------------------
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body class="gallery">
<h1>Gallery</h1>
</body>
</html>
-------------------------------------------------
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body class="contact">
<h1>contact</h1>
</body>
</html>
I am creating a website for school... but I haven't been able to link the different HTML pages to the css (for changing the background color etc...)I have 4 HTML pages, I don't know if I have to add divs or something like that, could you please help me to link those html with the main css ? .. I'm going to post the css page, and the three html pages. thank you so much, I would be so glad if you can help me with that.
You need to link your CSS style sheets to each page, in your case you will need to upload your CSS files to your server and reference them.
Convention dictates that they are added in the <head>, i.e:
<head>
<link href="PATH_TO_CSS_FILE.css" rel="stylesheet">
</head>
<body>
... page HTML ...
</body>
The snippet you have provided works as it should, the only CSS style that you have in your demonstration HTML (which I imagine is a condensed example) is the body tag.
If the CSS styles are not being applied to your working HTML pages then it is likely that you have not correctly linked the CSS stylesheet. You can check the console within your browser to see if there are any errors (i.e. if the stylesheet is not being loaded).
If you wanted your headings (h1) to use the effects you've dictated in .text, then you need to add the class to the element, i.e.:
<h1 class="text">About Me</h1>
I have shown a working snippet below.
body{
background-color: black;
margin-top: 45px;
}
.backdrop {
background: url(../images/header.JPG) center;
background-size: contain;
margin: auto;
margin-top: 185px;
width: 85vw;
}
.text {
text-shadow: 0 0 9px white;
color: white;
border: 4px solid;
background: rgb(59, 2, 6);
mix-blend-mode:multiply;
font: bolder 10vw 'arial';
text-align: center;
margin:0;
animation: glow 3s infinite;
}
#keyframes glow {
0% {
text-shadow: 0 0 10px white;
}
15% {
text-shadow: 2px 2px 10px rgba(255, 255, 255, 1),
-2px -2px 10px rgba(255, 255, 255, 1);
}
30% {
text-shadow: 2px 2px 4px rgba(255, 255, 255, .7),
-2px -2px 4px rgba(255, 255, 255, .7);
}
}
ul li {
float: left;
list-style: none;
margin-right: 1em;
}
li a {
color: #544738;
text-decoration: none;
float: left;
font-size: 25px;
padding: 10px;
padding-top: 30px;
margin-left: 155px;
}
li a:hover {
color: #740001;
}
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1 class="text">About me</h1>
</body>
</html>
Classes must be applied to each element in order for the styles to take effect. If you want all headings to have the glow effect, etc that you have coded then you may want to think about changing .text to h1 in your stylesheet, so that you do not need to apply the class each time you create a header. For example:
body{
background-color: black;
margin-top: 45px;
}
.backdrop {
background: url(../images/header.JPG) center;
background-size: contain;
margin: auto;
margin-top: 185px;
width: 85vw;
}
h1 {
text-shadow: 0 0 9px white;
color: white;
border: 4px solid;
background: rgb(59, 2, 6);
mix-blend-mode:multiply;
font: bolder 10vw 'arial';
text-align: center;
margin:0;
animation: glow 3s infinite;
}
#keyframes glow {
0% {
text-shadow: 0 0 10px white;
}
15% {
text-shadow: 2px 2px 10px rgba(255, 255, 255, 1),
-2px -2px 10px rgba(255, 255, 255, 1);
}
30% {
text-shadow: 2px 2px 4px rgba(255, 255, 255, .7),
-2px -2px 4px rgba(255, 255, 255, .7);
}
}
ul li {
float: left;
list-style: none;
margin-right: 1em;
}
li a {
color: #544738;
text-decoration: none;
float: left;
font-size: 25px;
padding: 10px;
padding-top: 30px;
margin-left: 155px;
}
li a:hover {
color: #740001;
}
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>About me</h1>
</body>
</html>
your css is working but you have set the body background color to black and your text is also black
try replacing your first css rule with
body{
background-color: white;
margin-top: 45px;
}
I am trying to implement bootstrap tokenfield with typeahead using JSON.
<input type="text" class="span" id="typeahead" data-provide="typeahead">
I have these two functions which work very well in isolation, but when I try to combine them it does not work.
Typeahead:
$("#typeahead").typeahead({
source: function(typeahead,query){
$.ajax({
url: 'getgoups.php',
type:'POST',
data:'query'+query,
dataType:'JSON',
async:false,
success:function(data){
typeahead.process(data);
}
});
}
})
TokenField
I get stuck when I have to combine the two.
$("#typeahead").tokenfield({
typeahead:[ source: ]
});
I finally got it, after all those times of trying:
<!DOCTYPE>
<html lang="en">
<head>
<title>Andani Masikhwa</title>
<link href="bootstrap-tokenfield.css" type="text/css" rel="stylesheet">
<!--<link href="tokenfield-typeahead.css" type="text/css" rel="stylesheet">-->
</head>
<style>
.tt-query,
.tt-hint {
width: 396px;
height: 30px;
padding: 8px 12px;
font-size: 24px;
line-height: 30px;
border: 2px solid #ccc;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
outline: none;
}
.tt-query {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.tt-hint {
color: #999
}
.tt-dropdown-menu {
width: 422px;
margin-top: 12px;
padding: 8px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.tt-suggestion {
padding: 3px 20px;
font-size: 18px;
line-height: 24px;
}
.tt-suggestion.tt-is-under-cursor {
color: #fff;
background-color: #0097cf;
}
</style>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-tokenfield.js" charset="UTF-8"></script>
<script src="http://cdn.jsdelivr.net/typeahead.js/0.9.3/typeahead.min.js"></script>
<script>
$(document).ready(function(){
$('#search').tokenfield({
typeahead:{
name : 'sear',
remote: {
url : 'connection.php?query=%QUERY'
},
success:function(data){
process(data);
}
}
});
});
</script>
<body>
<input type="text" class="form-control" id="search" value="andani" />
</body>
</html>