I've used the Sanitize Ruby gem with the following code:
result = Sanitize.clean(html)
It pulls the content from the page, but I still have this CSS in the sanitized result. How do I get rid of it so I just have the page text?
#fsb-social-bar { width: 100%; border-bottom: 1px solid #dbdbdb; border-top: 1px solid #dbdbdb; padding: 10px 0; margin: 0px 0 20px 0; float: left; background: #fff; position: relative; clear: both; } #fsb-social-bar a { border: 0px !important } #fsb-social-bar.fsb-fixed { position: fixed; top: -2px; z-index: 99999; } #fsb-social-bar .fsb-title { display: block; float: left; margin: 3px 20px 0 0; font-size: 16px; font-family: Arial, Helvetica, sans-serif; text-decoration: none; color: #333; } #fsb-social-bar .fsb-share-facebook { width: 120px; float: left; padding: 3px 0 2px; height: 25px; } #fsb-social-bar .fsb-share-facebook.fsb-hide-count { width: 44px; overflow: hidden; margin-right: 30px; } #fsb-social-bar .fsb-share-twitter { float: left; width: 135px; padding: 3px 0 2px; height: 25px; } #fsb-social-bar .fsb-share-twitter.fsb-hide-count { width: 61px; overflow: hidden; margin-right: 30px; } #fsb-social-bar .fsb-share-google { float: left; width: 105px; padding: 3px 0 2px; height: 25px; } #fsb-social-bar .fsb-share-google.fsb-hide-count { width: 33px; overflow: hidden; margin-right: 30px; } #fsb-social-bar .fsb-share-linkedin { float: left; width: 135px; padding: 3px 0 2px; height: 25px; } #fsb-social-bar .fsb-share-linkedin.fsb-hide-count { width: 61px; overflow: hidden; margin-right: 30px; } #fsb-social-bar .fsb-share-pinterest { float: left; width: 115px; padding: 3px 0 2px; height: 25px;} #fsb-social-bar .fsb-share-pinterest.fsb-hide-count { width: 43px; overflow: hidden; margin-right: 30px; } #fsb-social-bar .socialite { display: block; position: relative; background: url(http://www.example.net/wp-content/plugins/floating-social-bar/images/fsb-sprite.png) no-repeat scroll 0 0; } #fsb-social-bar .socialite-loaded { background: none !important; } #fsb-social-bar .fsb-service-title { display: none; } #fsb-social-bar a { color: #333; text-decoration: none; font-size: 12px; font-family: Arial, Helvetica, sans-serif; } #fsb-social-bar .fsb-twitter { width: 105px; height: 25px; background-position: -13px -10px; line-height: 25px; vertical-align: middle; } #fsb-social-bar .fsb-twitter .fsb-count { width: 30px; text-align: center; display: inline-block; margin: 0px 0 0 69px; color: #333; } #fsb-social-bar .fsb-google { width: 75px; height: 25px; background-position: -136px -10px; line-height: 25px; vertical-align: middle; } #fsb-social-bar .fsb-google .fsb-count { width: 30px; text-align: center; display: inline-block; margin: 0px 0 0 41px; color: #333; } #fsb-social-bar .fsb-google .socialite-button { margin: 0 !important; } #fsb-social-bar .fsb-share-google .socialite-loaded .socialite-button{padding: 2px 0 0} #fsb-social-bar .fsb-facebook { width: 89px; height: 25px; background-position: -231px -10px; line-height: 25px; vertical-align: middle; } #fsb-social-bar .fsb-facebook .fsb-count { width: 30px; text-align: center; display: inline-block; margin: 0px 0 0 52px; color: #333; } #fsb-social-bar .fsb-facebook .socialite-button { margin: 0 !important;} #fsb-social-bar .fsb-share-facebook .socialite-loaded .socialite-button {padding: 2px 0 0} #fsb-social-bar .fsb-linkedin { width: 105px; height: 25px; background-position: -347px -10px; line-height: 25px; vertical-align: middle; } #fsb-social-bar .fsb-linkedin .fsb-count { width: 30px; text-align: center; display: inline-block; margin: 0px 0 0 70px; color: #333; } #fsb-social-bar .fsb-linkedin .socialite-button { margin: 0 !important; } #fsb-social-bar .fsb-pinterest { width: 88px; height: 25px; background-position: -484px -10px; line-height: 25px; vertical-align: middle; } #fsb-social-bar .fsb-pinterest .fsb-count { width: 30px; text-align: center; display: inline-block; margin: 0px 0 0 50px; color: #333; } #fsb-social-bar .fsb-pinterest .socialite-button { margin: 0 !important; } #fsb-social-bar .fsb-clear { clear: both; } #fsb-social-bar .fsb-clear:after { clear:both; content:; display:block; height:0; line-height:0; overflow:auto; visibility:hidden; zoom:1; } #media (max-width: 768px) { #fsb-social-bar.fsb-fixed { position: relative !important; top: auto !important; } } Facebook2 Twitter1 Google+0 LinkedIn0 Pinterest0 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at nisl auctor, dignissim odio vel, suscipit velit. Vivamus pretium velit quis sapien scelerisque ullamcorper. Vivamus ullamcorper lacus non magna suscipit laoreet. In hac habitasse platea dictumst. Nulla aliquam dolor nec neque auctor pretium. Nullam vitae enim nisl. In imperdiet lacinia nunc at congue. Aliquam posuere nulla vel ornare accumsan. Fusce vitae sapien et nulla fringilla congue quis eu tellus. Nunc vestibulum turpis eget convallis cursus. Integer ut sapien molestie odio interdum luctus. Vestibulum urna justo, sagittis ut sodales eu, rutrum a magna. Proin consequat convallis nibh vel semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque eu purus quis massa lobortis eleifend.
The solution needs to work on not only this text, but any string that could happen to have CSS. Thanks for your help.
If your CSS code is inside a style tag, you can use this one:
Sanitize.clean(content, :remove_contents => ['script', 'style'])
Other solution is css_transformer.rb.
Related
I just completed mimicking app creation just like I did in online lessons. I figure, I'd take a little step further by making my app look nicer.
I am trying to change my "home" link text to an image.
Surely, I have done that in HTML before but not in Rails. I am a bit confused because of "link_to" method. How do I do it, giving my current set-up?
application.html.erb
<header>
<div class="header-logo">
<%= link_to("Home", "/") %>
</div>
...
where routes.rb are
get "/" => "home#top"
home.scss
* {
box-sizing: border-box;
}
html {
font: 100%/1.5 'Avenir Next', 'Hiragino Sans', sans-serif;
line-height: 1.7;
letter-spacing: 1px;
}
ul, li {
list-style-type: none;
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: #2d3133;
font-size: 14px;
}
h1, h2, h3, h4, h5, h6, p {
margin: 0;
}
input {
background-color: transparent;
outline-width: 0;
}
form input[type="submit"] {
border: none;
cursor: pointer;
}
/* Common Layout ================================ */
body {
color: #2d3133;
background-color: white;
margin: 0;
min-height: 1vh;
background-image: url("/top.jpg");
}
.main {
position: absolute;
top: 64px;
width: 100%;
height: auto;
min-height: 100%;
background-color: #f5f8fa;
}
.container {
max-width: 600px;
margin: 60px auto;
padding-left: 15px;
padding-right: 15px;
clear: both;
}
/* Header ================================ */
header {
height: 64px;
position: absolute;
z-index: 1;
width: 100%;
}
.header-logo {
float: left;
padding-left: 20px;
color: black;
font-size: 22px;
line-height: 64px;
}
.header-logo a{
color: black;
font-size: 22px;
}
.header-menus {
float: right;
padding-right: 20px;
}
.header-menus li {
float: left;
line-height: 64px;
font-size: 13px;
color: black;
padding-left: 15px;
}
.header-menus a {
float: left;
font-size: 13px;
color: black;
padding-right: 15px;
}
.header-menus .fa {
padding-right: 5px;
}
.header-menus input[type="submit"] {
padding: 0 20px;
float: left;
line-height: 64px;
color: black;
margin: 0;
font-size: 13px;
}
/* Top ================================ */
.top-main {
padding: 200px 0 100px;
text-align: center;
position: absolute;
top: 0;
width: 100%;
height: auto;
min-height: 100%;
color: black;
background-color: white;
background-repeat: no-repeat;
background-position: center 50%;
background-size: cover;
background-image: url("/top.jpg");
}
.top-message {
position: relative;
}
.top-main h2 {
font-size: 70px;
font-weight: 500;
line-height: 1.3;
-webkit-font-smoothing: antialiased;
margin-bottom: 20px;
}
.top-main p {
font-size: 24px;
}
/* About ================================ */
.about-main {
padding: 180px 8% 0;
color: black;
}
.about-main h2 {
font-size: 64px;
font-weight: 500;
line-height: 1.4;
}
.about-main p {
font-weight: 200;
font-size: 20px;
}
.about-img {
width: 25%;
}
/* Form ================================ */
.form {
max-width: 600px;
margin: 0 auto;
background-color: black;
box-shadow: 0 2px 6px #c1ced7;
}
.form-heading {
font-weight: 300;
margin: 60px 0 20px;
font-size: 48px;
color: #bcc8d4;
}
.form-body {
padding: 30px;
}
.form-error {
color: #ff4d75;
}
.form input {
width: 100%;
border: 1px solid #ffffff;
padding: 10px;
color: #57575f;
font-size: 16px;
letter-spacing: 2px;
border-radius: 2px;
}
.form textarea {
width: 100%;
min-height: 110px;
font-size: 16px;
letter-spacing: 2px;
}
.form input[type="submit"] {
background-color: #ffffff;
color: black;
cursor: pointer;
font-weight: 300;
width: 120px;
border-radius: 2px;
margin-top: 8px;
margin-bottom: 0;
float: right;
}
.form-body:after {
content: '';
display: table;
clear: both;
}
/* Flash ================================ */
.flash {
padding: 10px 0;
color: black;
background: rgb(251, 170, 88);
text-align: center;
position: absolute;
top: 64px;
z-index: 10;
width: 100%;
border-radius: 0 0 2px 2px;
font-size: 14px;
}
Thank you for your time :)
You can try it <%= link_to image_tag('image_here'), '/' %>
I think this is what you want
<%= link_to "#{image_tag("name-of-img-here.png")}".html_safe, root_path %>
Make sure you image is in the app/assets/images/ folder for this to link correctly.
You will also likely need to add a class and then style it the image for it to look good.
I read several places that its a CSS issue but I can't figure out how to fix it.
When a user types information into the website, it does not display any text but the cursor moves as if text was typed.
CSS file
*:focus,
*:hover,
*:active {
outline: none;
}
html {
overflow-x: hidden;
}
body {
margin: 0;
color: #6a6f8c;
background: #fafafa;
font: 600 16px/18px 'Open Sans', sans-serif;
height: auto;
}
*,
:after,
:before {
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.clearfix:after,
.clearfix:before {
content: '';
display: table
}
.clearfix:after {
clear: both;
display: block
}
a {
color: inherit;
text-decoration: none
}
.login-wrap {
width: 100%;
margin: auto;
max-width: 525px;
min-height: 1070px;
position: relative;
background: url(https://raw.githubusercontent.com/khadkamhn/day-01-login-form/master/img/bg.jpg) no-repeat center;
-webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19);
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19);
background-size: cover;
}
.login-html {
width: 100%;
height: 100%;
position: absolute;
padding: 90px 70px 50px 70px;
background: rgba(40, 57, 101, .9);
}
.login-html .sign-in-htm,
.login-html .sign-up-htm {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all .4s linear;
transition: all .4s linear;
}
.login-html .sign-in,
.login-html .sign-up,
.login-form .group .check {
display: none;
}
.login-html .tab,
.login-form .group .label,
.login-form .group .button {
text-transform: uppercase;
}
.login-html .tab {
font-size: 22px;
margin-right: 15px;
padding-bottom: 5px;
margin: 0 15px 10px 0;
display: inline-block;
border-bottom: 2px solid transparent;
}
.login-html .sign-in:checked+.tab,
.login-html .sign-up:checked+.tab {
color: #fff;
border-color: #1161ee;
}
.login-form {
min-height: 345px;
position: relative;
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.login-form .group {
margin-bottom: 15px;
}
.login-form .group .label,
.login-form .group .input,
.login-form .group .button {
width: 100%;
color: #fff;
display: block;
}
.login-form .group .input,
.login-form .group .button {
border: none;
padding: 15px 20px;
border-radius: 25px;
background: rgba(255, 255, 255, .1);
}
.login-form .group input[data-type="password"] {
text-security: circle;
-webkit-text-security: circle;
}
.login-form .group .label {
color: #aaa;
font-size: 12px;
}
.login-form .group .button {
background: #1161ee;
}
.login-form .group label .icon {
width: 15px;
height: 15px;
border-radius: 2px;
position: relative;
display: inline-block;
background: rgba(255, 255, 255, .1);
}
.login-form .group label .icon:before,
.login-form .group label .icon:after {
content: '';
width: 10px;
height: 2px;
background: #fff;
position: absolute;
-webkit-transition: all .2s ease-in-out 0s;
transition: all .2s ease-in-out 0s;
}
.login-form .group label .icon:before {
left: 3px;
width: 5px;
bottom: 6px;
-webkit-transform: scale(0) rotate(0);
transform: scale(0) rotate(0);
}
.login-form .group label .icon:after {
top: 6px;
right: 0;
-webkit-transform: scale(0) rotate(0);
transform: scale(0) rotate(0);
}
.login-form .group .check:checked+label {
color: #fff;
}
.login-form .group .check:checked+label .icon {
background: #1161ee;
}
.login-form .group .check:checked+label .icon:before {
-webkit-transform: scale(1) rotate(45deg);
transform: scale(1) rotate(45deg);
}
.login-form .group .check:checked+label .icon:after {
-webkit-transform: scale(1) rotate(-45deg);
transform: scale(1) rotate(-45deg);
}
.login-html .sign-in:checked+.tab+.sign-up+.tab+.login-form .sign-in-htm {
-webkit-transform: rotate(0);
transform: rotate(0);
}
.login-html .sign-up:checked+.tab+.login-form .sign-up-htm {
-webkit-transform: rotate(0);
transform: rotate(0);
}
.hr {
height: 2px;
margin: 60px 0 50px 0;
background: rgba(255, 255, 255, .2);
}
.foot-lnk {
text-align: center;
}
.fullwidth {
width: 100%;
}
.fulheight {
height: 100%;
}
.main {
background: #fafafa;
padding: 15px;
}
.btn__grp button:last-child {
margin-right: 15px;
}
.blank_input_hack {
height: 0;
width: 0;
opacity: 0;
}
.input option {
color: black;
}
#promoForm {
max-width: 600px;
margin: 0 auto;
}
/*.tooltip.ng-scope.ng-isolate-scope.top.fade.in{
word-break: break-word;
}*/
.color-box>div {
display: inline-block;
margin-bottom: 15px;
}
.color-box>div:not(:last-child) {
margin-right: 3px;
}
.color-box>div label {
margin: 0;
padding: 3px;
border: solid 1px #979797;
}
.btn.pull-right {
margin-right: 10px;
}
#user {
text-transform: lowercase;
}
input,
textarea {
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
table tr th {
background: #337ab7;
color: white;
text-align: left;
vertical-align: center;
}
The website is https://braindrain.developmentserver.me
I think I have found the solution. Nice tip if you didn't know this, you can plug your iPhone into a Mac via usb and use the web inspector remotely. I found that you have a div before the username input form with the class blank_input_hack. Once I removed this, then the input works flawlessly, styled and all. Not sure why this was there in the first place, but there you go! Hope this helps!
I am a beginner at programming websites and know some about how HTML and CSS works but not much about jquery and javascript etc. I have managed to create a website and published it. It is not entirely finished but almost everyting works fine on computers, but on other devices (phones) my footer is complete caos and doesnt work the way i want it to. How can i fix this?
here is the index:
<div class="längstned3">
<img src="images/blånere.jpg" style="width:100%; height:300px;">
<div class="neretext">
<p><font color="#A4A4A4" size="2">Bonusprofit.se är en oberoende webbsida som jämför olika spelbolag och deras utbud av olika oddsbonusar. Vi har inte särskilda knutningar till någon/några specifika spelbolag och meningen med vår sida är att du som besökare med hjälp utav oss ska kunna se, jämföra och till sist välja den/de bonusar som passar just dig. Vid frågor eller synpunkter är du alltid välkommen att kontakta oss via mail eller sociala medier.</font></p>
</div>
<footer>
<font size="2" color="#A4A4A4">Spela inte om du är under 18.</font>
</footer>
<div class="fbtw"><p><font color="#BDBDBD" size="3">Sociala medier</font></p><hr><font size="2"><p><a class="twfärg" href="www.twitter.se"><u>Twitter</u></a></p><hr><p><a class="fbfärg" href="www.facebook.se"><u>Facebook</u></a></p></font><hr></div>
<div class="ansvarsfulltspelande"><p><font size="2" color="#A4A4A4">Vi stödjer ansvarsfullt spelande</font></p></div><div class="längstned1"><p> <font color="#BDBDBD">Copyright © 2017. Alla rättigheter reserverade. Bonusprofit.se </font></p></div><div align="center" class="längstned2"><a class="stödlinjen" target="blank" href="https://www.stodlinjen.se/#!/" ><abbr title="besök stödlinjens hemsida"><p><font size="4"><b>18+</b></font></p></abbr></a></div>
and here is the css:
.längstned1 { position: absolute;
bottom: 20px;
left: 790px;}
.längstned2 { position: absolute;
bottom: 245px;
right: 900px;
line-height:40px;
width:40px;
height:40px;
border-style:solid;
border-width:1px;
border-color:#A4A4A4;
border-radius:50%;
background-color:#A4A4A4;}
.längstned3 {
position:relative;
margin-top: 1600px;}
.twitter {
bottom: 10px;
right: 60px;
position:absolute;
border-style: solid;
border-width: 1px;
border-color: white;
border-radius: 50%;
background-color: white;}
.stödlinjen { text-decoration: none !important; color:black;}
.twitter:hover { -moz-box-shadow: 0 0 10px #4d4d4d;
-webkit-box-shadow: 0 0 10px #4d4d4d;
box-shadow: 0 0 10px #ccc;
opacity: 0.99;}
.facebook { background-color:#045FB4;
display:block;
float: right;
width: 55px;
height: 55px;
margin-top: -57px;
margin-right: 120px;
border-style: solid;
border-width: 1px;
border-color: white;
border-radius: 50%;
font-style: arial;
line-height: 55px;}
.facebook:hover {-moz-box-shadow: 0 0 15px #4d4d4d;
-webkit-box-shadow: 0 0 15px #4d4d4d;
box-shadow: 0 0 15px #ccc;
opacity: 0.99;}
.ansvarsfulltspelande {position: absolute;
bottom: 255px;
right: 960px; }
.länknere { color: white;}
.twfärg { color: white; }
.fbfärg { color: white;}
.kontaktaoss {color:#D8D8D8;}
.neretext {
width: 500px;
position: absolute;
bottom: 100px;
left: 30px;}
.fbtw { position: absolute;
bottom: 100px;
right: 150px;}
.footer {
color: black;
position: absolute;
bottom: 253px;
right:710px;
font-size: 16px;
font-family: Helvetica, Arial, sans-serif;
font-variant: caps;
font-weight: normal;
z-index: 5;}
Could you create a JSFiddle. The font element in the footer isn't supported in HTML5 w3 font tag, use css classes and IDs or and in-line style attribute
(<p style="color:blue">text<p>).
The two divs inside the footer for organization could go inside the footer.
<footer>// acts like a container div for the end of your page
<div> //These divs organize space inside of your footer.
</div>
<div>
</div>
</footer
In my app I need to present an HTML file in TextView not in WebView, and this file has a complex CSS, not just text color, bold, etc.
My CSS is like the one below:
table {
width: 100%;
}
table td {
padding: 10px;
border-bottom: 1px solid #eee;
box-sizing: border-box;
}
/* -------------------------------------------------- */
.btn {
float: left;
font-size: 11px;
color: #FFF!important;
text-transform: uppercase;
background: #a8353a;
padding: 0 14px;
margin: 10px 0 0!important;
cursor: pointer;
line-height:30px;
}
.btn:hover {
background: #d8474e
}
/* -------------------------------------------------- */
ul li {
list-style-type: square;
margin: 10px 20px;
}
.allcaps {
text-transform:uppercase;
}
/* -------------------------------------------------- */
.tablewithimages .image {
width: 45%;
}
#media only screen and (max-width: 768px) {
.tablewithimages td, .tablewithimages .image {
display:block;
width:100%;
padding: 10px 0 0 0;
border:0;
}
.tablewithimages img {
margin-top:30px;
}
}
/* -------------------------------------------------- */
/* ---------------- RECOMMENDED APPS ---------------- */
.appslist a {
border: 0 !important;
}
.appslist ul {
vertical-align: top;
margin:0;
padding: 0;
}
.appslist li {
width: 48.5%;
display: inline-table;
margin-bottom: 50px;
vertical-align: top;
padding-right: 1%;
}
.inner_left_side.equal .appslist .appitem {
width: 100%;
padding-right: 0;
margin-bottom: 20px;
}
ul .appitem {
margin: 10px 0;
}
.appslist img {
height: auto;
max-height: 100%;
max-width: 100%;
width: 100%;
box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
border: 1px solid #ccc;
border-radius: 18px;
overflow: hidden;
}
.appslist .appitem .image {
width: 70px;
height: 110px;
float: left;
margin-right: 10px;
margin-top: 0;
}
.appslist p {
padding-right: 10px;
margin-bottom: 10px;
text-align: initial;
}
.appslist .apptitle {
font-size: 14px;
margin-right: 10px;
padding-top: 0;
margin-top: 0;
margin-bottom: 7px;
text-transform: uppercase;
font-weight: bold;
}
.appslist .apptext {
font-size: 14px;
line-height: 22px;
margin-left: 90px;
}
.appslist .stores {
margin-left: 90px;
width: auto;
display: block;
}
.inner_left_side.equal .appslist .stores {
width: 100%;
text-align: initial;
}
.story .text .appslist .stores {
margin-left: 130px;
}
.appslist .appitem li {
display: inline-block;
min-height: 0;
margin-bottom: 0px;
width: 125px;
background-repeat:no-repeat;
margin: 0;
}
.appslist .appitem li a {
display: block;
padding-left: 33px;
background-repeat: no-repeat;
background-position: 5px center;
color: rgba(51,51,51,1.00);
background-color: rgba(255,255,255,0.00);
border-radius: 3px;
text-decoration: none;
padding-right: 10px;
line-height: 34px;
font-size: 14px;
background-size: auto 75%;
white-space: nowrap;
}
.stores .apple {
background-image:url('********.png');
}
.stores .android {
background-image:url('********.png');
}
#media only screen and (max-width: 800px) {
.appslist li {
width: 100%;
}
.inner_left_side.equal .appslist .stores {
width:auto;
}
}
I searched a lot on how to present full CSS in UITextView, and I found answers like this one but all these answers defined how to add simple CSS.
Does anyone try to add complex CSS to UITExtView before? Are there any libraries support this features?
I can't understand why this tutorial example does not work for me:
I have external js libraries:
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"
"http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"
And this code on load document:
<script type="text/javascript">
$(document).ready(function () {
$('input.typeahead').typeahead({
name: 'cars',
local: ['Audi', 'BMW', 'Bugatti', 'Ferrari', 'Ford', 'Lamborghini', 'Mercedes Benz', 'Porsche', 'Rolls-Royce', 'Volkswagen']
});
});
</script>
I have css:
<style type="text/css">
.bs-example {
font-family: sans-serif;
position: relative;
margin: 100px;
}
.typeahead, .tt-query, .tt-hint {
border: 2px solid #CCCCCC;
border-radius: 8px;
font-size: 24px;
height: 30px;
line-height: 30px;
outline: medium none;
padding: 8px 12px;
width: 396px;
}
.typeahead {
background-color: #FFFFFF;
}
.typeahead:focus {
border: 2px solid #0097CF;
}
.tt-query {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
color: #999999;
}
.tt-dropdown-menu {
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
margin-top: 12px;
padding: 8px 0;
width: 422px;
}
.tt-suggestion {
font-size: 24px;
line-height: 24px;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
background-color: #0097CF;
color: #FFFFFF;
}
.tt-suggestion p {
margin: 0;
}
</style>
And html code:
<body>
<div class="bs-example">
<input type="text" class="typeahead tt-query" autocomplete="off" spellcheck="false">
</div>
</body>
Can anyone help me ?