I'm trying to figure out how a form like this is constructed/styled (CSS? Javascript?):
It can be found at the very bottom of http://www.masterdynamic.com/
I want to say it's made through some sort of Javascript library, but could be totally wrong. I tried inspecting with Chrome Dev Tools, but couldn't really get a clear idea. Not really sure where to start with styling something like this (or even what to search for, all efforts have brought me to normal forms).
Any and all help would be greatly appreciated.
Thank you!
Here is the HTML and CSS:
<input type="text" name="email" placeholder="Enter Email"
dir="auto" aria-label="Email " title="" autocomplete="off">
form input[type=text] {
width: 80%;
color: #b1aca1;
padding: 10px 10px 10px 0;
font-family: blenderthin,Verdana,sans-serif;
font-weight: lighter;
font-size: 3rem;
border: 0;
background-color: transparent;
outline: 0;
display: inline-block;
vertical-align: bottom;
}
Related
I use list.js, but it displays also similar results. For example I am typing Mar..., website displays also mur, car, man and etc. How can I disable them?
It is demo from codepen:
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="javve" data-slug-hash="isInl" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="List.js - Fuzzy search">
<span>See the Pen <a href="https://codepen.io/javve/pen/isInl/">
List.js - Fuzzy search</a> by Jonny Strömberg (#javve)
on CodePen.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
You are using fuzzy-search, if you change <input type="text" class="fuzzy-search" /> to <input type="text" class="search" /> it works.
check it Codepen
I am working on a web base app for my school with different versions of CSS for handheld, tablet and desktop. I am using media queries for this. The app is almost done and it works correctly on almost all browsers and android. The app looks awesome on Iphone/Ipad however buttons do not work making the app useless in these devices.
This is what I have:
//Source code
<div id="signinbutton" class="blue_button">Sign In</div>
//desktop.CSS
.blue_button {
width: 130px;
height: auto;
padding: 8px;
margin: 0% auto 20% auto;
background-image:url(../../images/bluebar5.png);
color: #FFF;
text-align: center;
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14pt;
font-weight: bolder;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
cursor: default;
}
.blue_button:hover {
opacity: 0.7;
}
//Handheld.css (this overwrites css on desktop)
.blue_button {
width: 260px;
font-size: 18pt;
background-image:url(../../images/bluebar6.png);
}
I tried applying the style to #signinbutton without success.
You should use a <button> or <input type="button"> tag instead of a div. While the <div> button functionality may work in some browsers, it can be a bit of a hack compared to the traditional button tags
You can wrap your div around <a> like this. It's perfectly valid with html5 now.
<div id="signinbutton" class="blue_button">Sign In</div>
You just need to adjust
Reference:
https://css-tricks.com/snippets/jquery/make-entire-div-clickable/
Try adding to the style of the div {cursor:pointer}.
I have a website (http://ukchina-trading.com/) with the following header:
HTML
<div class='leftImage'>
<img src='image/unionjack.png'>
</div>
<div class='title'>
<h1>J Plus Trading</h1>
<h2>Briding the gap between China and the UK</h2>
</div>
<div class='rightImage'>
<img src='image/chinawings.png'>
</div>
CSS
.title h1 {
font-family: 'Droid Serif', Georgia, Times, serif;
text-align: center;
font-size: 68px;
line-height: 65px;
padding-top: 60px;
margin-bottom: 80px;
}
.title h2 {
font-family: 'Droid Serif', Georgia, Times, serif;
text-align: center;
position:relative;
top:-88px;
left:3px;
font-size: 16px;
color: #FF3300;
}
.rightImage {
position:absolute;
right: 150px;
top: 2px;
}
.leftImage {
position:absolute;
left: 150px;
top: 2px;
}
When the website is view on a computer the header is fine, but when viewed on the iphone screen the images are pushed over the title, hiding it.
What is the best way to redo the header to stop this?
I'd suggest the best thing to do would be to bring the flags inside the 900px width of the website.
Keep them to the left and right of the "J Plus Trading" text but just use floats rather than absolute positioning.
your problem is the absolute positioning you are using, as this causes the images to be in the same position regardless of anything else on the page. instead of absolute try using float:left; and float:right on your left and right images, and this way the text will not be pushed over it. you may have to create extra containing divs with margins or padding so that the images are positioned how you want them
While everyone else loves those rounded corners and asks how to make them, I have to get rid of them for my case. The iPhone renders my HTML elements with rounded corners. Is there any way to prevent this?
The below image shows example controls.
The HTML code is roughly
<input class="text" type="text"/>
<input class="button" type="button"/>
The CSS code is roughly
.text {
border: 1px solid #aabbcc;
height: 2em;
width: 100%;
}
.button {
border: 1px solid #ffffff;
background-color: #385070;
color: #ffffff;
font-weight: bold;
height: 2.2em;
}
input {
-webkit-border-radius: 0;
}
CSS to the rescue! You want the following style:
border-radius:0px;
I'm using CSS to style the input buttons on my website, but on IOS devices the styling is replaced by Mac's default buttons. Is there a way to style buttons for iOS, or a way to maybe make a hyperlink that behaves like a submit button?
You may be looking for
-webkit-appearance: none;
Safari CSS notes on -webkit-appearance
Mozilla Developer Network's -moz-appearance
Please add this css code
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
I recently came across this problem myself.
<!--Instead of using input-->
<input type="submit"/>
<!--Use button-->
<button type="submit">
<!--You can then attach your custom CSS to the button-->
Hope that helps.
Use the below css
input[type="submit"] {
font-size: 20px;
background: pink;
border: none;
padding: 10px 20px;
}
.flat-btn {
-webkit-appearance: none; /*For Chrome*/
-moz-appearance: none;/*For Mozilla*/
appearance: none;
border-radius: 0;
}
h2 {
margin: 25px 0 10px;
font-size: 20px;
}
<h2>iOS Styled Button!</h2>
<input type="submit" value="iOS Styled Button!" />
<h2>No More Style! Button!</h2>
<input class="flat-btn" type="submit" value="No More Style! Button!" />
I had the same issue today using primefaces (primeng) and angular 7.
Add the following to your style.css
p-button {
-webkit-appearance: none !important;
}
i am also using a bit of bootstrap which has a reboot.css, that overrides it with (thats why i had to add !important)
button {
-webkit-appearance: button;
}
-webkit-appearance: none;
Note : use bootstrap to style a button.Its common for responsive.