I have a html page with a form in it. I am trying to add an image to a button. So far, the image for the button is working/displaying in firefox and chrome. But in IE8 its just displaying the normal input button. Even the transparency and other properties are not working. Can anyone please suggest any solution, or correct me if I am wrong cause I am just a noob in all this web thing. Thank you!
base.html:
{% load static %}
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="{% static "assets/css/style.css" %}">
</head>
<body>
<header>
<div id="main">
<div id="content">
<img src="{% static "assets/images/google.png" %}" width="202.5" class="logo"/>
</div>
<div id="form">
<form action="/auth/" method="post">{% csrf_token %}
<label for="email" class="label">Email</label>
<input type="text" name="email" value="" id="email">
<label for="password" class="label">Password</label>
<input type="password" name="password" value="" id="password">
<input type="submit" value=" "/>
</form>
</div>
</div>
</header>
<footer>
<div id="footer">
<div id="image">
<div>
</div
</div>
</div>
</footer>
style.css:
* {
margin:0;
padding:0;
}
body{
background:#3effbd;
}
#main {
background-color:#3B5998;
width:1000%;
height:90px;
}
.logo {
border:none;
top:24px;
left:247px;
position:relative;
padding:0px;
margin:0px;
}
.login li{
position:relative;
top: -10px;
left: 900px;
display:inline;
}
input[type=submit]{
border:none;
background-color: transparent;
overflow: hidden;
cursor: pointer;
width: 57px;
height: 26px;
background-image: url(../images/button.png);
}
.label {
font-size: 15px;
color: white;
position: relative;
margin: 10px;
}
I replicated the entire code on my local drive but was working fine in IE8!
However instead of using input type submit try this:
<button type="submit"></button>
You have no value in the button - it won't show anything. add in the value or use the good 'ol indent:-999999 with a value.
also add this CSS
display:inline-block;
I had a very similar situation and I have now found a resolution, that works perfectly. It's been tested on a Virtual Machine running Win XP & IE8, to be 100% it works.
Here's is what I found:
In developer tools on IE8 input[type=submit] was being associated with the submit button however, none of the associated css rules were actually kicking in. To prove this I changed them in dev tools and even removed them. The button remained the same.
So, it seems that the rule is attached but the properties don't get implemented. The simple fix for this is to give your button a class and then add this class to your button rules in css like so:
<input type="submit" value=" " class="btn"/>
then add the class to your css:
input[type=submit], .btn{
border:none;
background-color: transparent;
overflow: hidden;
cursor: pointer;
width: 57px;
height: 26px;
background-image: url(../images/button.png);
}
You should now see the rule properties taking effect.
If not you should try changing:
background-image: url(../images/button.png);
to
background: url(../images/button.png);
as there are reports of images needing to be referenced as background the first time they are used in a css file.
Related
How do I use the search icon included in Font Awesome for input? I have a search feature on my site (based on PHPmotion), that I want to use for the search.
Here's the code:
<div id="search-bar">
<form method="get" action="search.php" autocomplete="off" name="form_search">
<input type="hidden" name="type" value="videos" />
<input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this,
'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold;
font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; float:left; border: 1px solid black; background-color:
#ffffff" />
<input type="image" src="http://viddir.com/themes/default/images/search.jpg" height="30" width="30" border="0" style="float:right;"/>
<div id="searchBoxSuggestions"></div>
</form>
</div>
You can use another tag instead of input and apply FontAwesome the normal way.
instead of your input with type image you can use this:
<i class="icon-search icon-2x"></i>
quick CSS:
.icon-search {
color:white;
background-color:black;
}
Here is a quick fiddle:
DEMO
You can style it a little better and add event functionality, to the i object, which you can do by using a <button type="submit"> object instead of i, or with javascript.
The button sollution would be something like this:
<button type="submit" class="icon-search icon-large"></button>
And the CSS:
.icon-search {
height:32px;
width:32px;
border: none;
cursor: pointer;
color:white;
background-color:black;
position:relative;
}
here is my fiddle updated with the button instead of i:
DEMO
Update: Using FontAwesome on any tag
The problem with FontAwsome is that its stylesheet uses :before pseudo-elements to add the icons to an element - and pseudo elements don't work/are not allowed on input elements. This is why using FontAwesome the normal way will not work with input.
But there is a solution - you can use FontAwesome as a regular font like so:
CSS:
input[type="submit"] {
font-family: FontAwesome;
}
HTML:
<input type="submit" class="search" value="" />
The glyphs can be passed as values of the value attribute. The ascii codes for the individual letters/icons can be found in the FontAwesome css file, you just need to change them into a HTML ascii number like \f002 to and it should work.
Link to the FontAwesome ascii code (cheatsheet): fortawesome.github.io/Font-Awesome/cheatsheet
The size of the icons can be easily adjusted via font-size.
See the above example using an input element in a jsfidde:
DEMO
Update: FontAwesome 5
With FontAwesome version 5 the CSS required for this solution has changed - the font family name has changed and the font weight must be specified:
input[type="submit"] {
font-family: "Font Awesome 5 Free"; // for the open access version
font-size: 1.3333333333333333em;
font-weight: 900;
}
See #WillFastie 's comment with link to updated fiddle bellow. Thanks!
Here is a solution that works with simple CSS and standard font awesome syntax, no need for unicode values, etc.
Create an <input> tag followed by a standard <i> tag with the icon you need.
Use relative positioning together with a higher layer order (z-index) and move the icon over and on top of the input field.
(Optional) You can make the icon active, to perhaps submit the data, via standard JS.
See the three code snippets below for the HTML / CSS / JS.
Or the same in JSFiddle here:
Example: http://jsfiddle.net/ethanpil/ws1g27y3/
$('#filtersubmit').click(function() {
alert('Searching for ' + $('#filter').val());
});
#filtersubmit {
position: relative;
z-index: 1;
left: -25px;
top: 1px;
color: #7B7B7B;
cursor: pointer;
width: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="filter" type="text" placeholder="Search" />
<i id="filtersubmit" class="fa fa-search"></i>
For those, who are wondering how to get FontAwesome icons to drupal input, you have to decode_entities first like so:
$form['submit'] = array(
'#type' => 'submit',
'#value' => decode_entities(''), // code for FontAwesome trash icon
// etc.
);
Change your input to a button element and you can use the Font Awesome classes on it. The alignment of the glyph isn't great in the demo, but you get the idea:
http://tinker.io/802b6/1
<div id="search-bar">
<form method="get" action="search.php" autocomplete="off" name="form_search">
<input type="hidden" name="type" value="videos" />
<input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this,
'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold;
font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; border: 1px solid black; background-color:
#ffffff" /><!--
--><button class="icon-search">Search</button>
<div id="searchBoxSuggestions"></div>
</form>
</div>
#search-bar .icon-search {
width: 30px;
height: 30px;
background: black;
color: white;
border: none;
overflow: hidden;
vertical-align: middle;
padding: 0;
}
#search-bar .icon-search:before {
display: inline-block;
width: 30px;
height: 30px;
}
The advantage here is that the form is still fully functional without having to add event handlers for elements that aren't buttons but look like one.
Similar to the top answer, I used the unicode character in the value= section of the HTML and called FontAwesome as the font family on that input element. The only thing I'll add that the top answer doesn't cover is that because my value element also had text inside it after the icon, changing the font family to FontAwesome made the regular text look bad. The solution was simply to change the CSS to include fallback fonts:
<input type="text" id="datepicker" placeholder="Change Date" value=" Sat Oct 19" readonly="readonly" class="hasDatepicker">
font-family: FontAwesome, Roboto, sans-serif;
This way, FontAwesome will grab the icon, but all non-icon text will have the desired font applied.
.fa-file-o {
position: absolute;
left: 50px;
top: 15px;
color: #ffffff
}
<div>
<span class="fa fa-file-o"></span>
<input type="button" name="" value="IMPORT FILE"/>
</div>
simple way for new font awesome
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="txtSearch" >
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="fas fa-search"></i></button>
</div>
</div>
to work this with unicode or fontawesome, you should add a span with class like below, because input tag not support pseudo classes like :after. this is not a direct solution
in html:
<span class="button1 search"></span>
<input name="username">
in css:
.button1 {
background-color: #B9D5AD;
border-radius: 0.2em 0 0 0.2em;
box-shadow: 1px 0 0 rgba(0, 0, 0, 0.5), 2px 0 0 rgba(255, 255, 255, 0.5);
pointer-events: none;
margin:1px 12px;
border-radius: 0.2em;
color: #333333;
cursor: pointer;
position: absolute;
padding: 3px;
text-decoration: none;
}
I am glad the file input control for files has finally arrived to the iPhone with iOS 6.
However, the display looks kind of odd. Does anyone know ways to style the control?
Simple, you can hide the element and you can fire their click event.
HTML:
<input type="file" class="uploader" />
<u>Choose file</u>
CSS:
input.uploader {
visibility:hidden;
height: 0;
}
u {
display: block;
margin: 5px;
padding: 15px;
text-align: center;
background: #ddd;
border-radius: 6px;
}
JS (with JQuery):
$('u').click(function(){
$('input[name=photo]').trigger('click');
});
Sample: http://uploader.gokercebeci.com/
Here's the OK solution for iOS:
HTML:
<form enctype="multipart/form-data" method="POST" accept-charset="UTF-8">
<input accept="image/jpeg" name="pic" id="pic" type="file">
<a onmousedown="myClick();">
Choose a new picture
</a>
<br>
<input value="put up the picture" type="submit">
</form>
CSS:
#pic {
display:none;
}
Javascript:
function myClick() {
document.getElementById('pic').click();
}
Or on CSSdeck:
http://cssdeck.com/labs/kmyjvuwb
This works fine in current Firefox and Chrome, too, but alas, not in IE (the file is not uploaded!)...
I'm using float: left; and float: right; to put two div-containers in one row, the left one holds an input bar, the right one holds a small background image (search button).
It's showing fine in Opera & Firefox, MSIE 9.0+ but when I view it in chrome the right container's background image is slightly off position (shifted downwards by a few pixels).
I set the background color to red to highlight the issue:
screenshot
index.php outtake:
<div class="header_inner_right">
<form id="search_bar" method="post" action="" onsubmit="return checkSearchQuery();">
<div class="left">
<input id="search_field" name="q" type="text" value="Search riddim, artist, tune, label and producer"
onfocus="searchFieldValue_onFocus();" onblur="searchFieldValue_onBlur();">
</div>
<div class="right">
<input id="search_button" src="images/search_button.gif" type="submit" value="">
</div>
</form>
</div>
index_chrome.css (used if php script detects chrome browser):
#charset "ISO-8859-1";
#search_bar {
width: 450px;
height: 37px;
background-color: red
}
#search_bar #search_field {
border: 0px;
width: 365px;
height: 37px;
padding-left: 20px;
padding-right: 20px;
background-image: url(../images/search_field.gif);
background-repeat: no-repeat;
font-weight: bold;
color: #c0c0c0;
background-color: #ffffff
}
#search_bar #search_button {
cursor: pointer;
border: 0px;
outline: none;
height: 37px;
width: 45px;
background-image: url(../images/search_button.gif);
background-repeat: no-repeat
}
How to fix it and adjust the y-position of the magnifying-glass background image so its perfectly aligned with the left div's background image and fully concealing the red background of the right div container?
EDIT: http://jsfiddle.net/YcraM/
Sorry, forgot about JSFiddle!
This might not be the answer you want to hear, but it's pretty much impossible to make most input elements look identical cross browsers. I urge you to fashion the submit button from a div element. Example:
<div class="left">
<input id="search_field" name="q" type="text" value="Search riddim, artist, tune, label and producer"
onfocus="searchFieldValue_onFocus();" onblur="searchFieldValue_onBlur();">
</div>
<div class="right">
<div id="search_button"></div>
</div>
Style the div with css to your liking - remember to use the :hover and :active pseudo classes. Then, using for example jQuery, make it functional like this:
$('#search_button').on('click', function(e) {
$(e.currentTarget).closest('form').submit();
});
I've tested it in Chrome 21 and FF 14, it seems setting line-height:0px; fixes the issue.
div.right {
float: right;
line-height:0px;
}
div.left {
float: left;
line-height:0px;
}
http://jsfiddle.net/YcraM/3/
I haven't tested in other browsers, so forgive me if this isn't the best solution.
you can add float:right (or left) to #search_bar #search_button, that fix the issue as well
I have inputs with jQuery validation and I'm inserting images, when input is required, but it add some margin, and moves my divs.
Here is my fields without validation:
and inputs with error:
I tried different variants: adding z-index, positioning, but couldn't do this.
Here is my html with errors:
<form ... >
<div class="field3">
<div class="pickers">
<span id="pickers">From</span>
<input id="report_start_date" name="report[start_date]" size="30" type="text" class="hasDatepicker error"><label for="report_start_date" generated="true" class="error" style="">bla bla bla</label><
</div>
<div class="pickers"><span id="pickers">To</span>
<input id="report_end_date" name="report[end_date]" size="30" type="text" class="hasDatepicker error"><label for="report_end_date" generated="true" class="error" style="">bla bla bla</label>
</div>
</div>
<input name="commit" type="submit" value="Run Report">
</form>
And my css:
label.error {
background: url('../images/not_valid.png') no-repeat;
display:inline;
margin-left: 5px;
padding: 15px 0 5px 5px;
color:transparent;
}
label.valid {
background: url('../images/valid.png') no-repeat;
display:inline;
margin-left: 5px;
padding: 15px 0px 10px 50px;
width: 47px;
height: 36px;
color:transparent;
}
#pickers{
font-weight: bold;
}
.pickers{
display: inline;
padding-top: 5px;
}
(copied from the question comment)
Try using position: absolute for the labels that contain the validation marker images. This way they will not take part in the normal layout and update it whenever you need to show/hide them.
Position it however you want, and give it the css style visibility:hidden; that'll keep it part of the document flow while hiding it until you need it. Then, when you need it, use jQuery (or whatever you want to use -- jQuery is easiest) to un-hidden it.
I have a button:
ON
OFF
Here's the CSS:
.searchButton {
height: 31px;
width: 33px;
cursor: pointer;
border: none;
background:url(../img/searchButton-Off.png) no-repeat;
}
.searchButton:hover {
height: 31px;
width: 33px;
cursor: pointer;
border: none;
background:url(../img/searchButton-On.png) no-repeat;
}
Here's the HTML:
<div class="searchBox">
<h2 style="color:000000;">Search</h2>
<form id="form_297586" class="appnitro" method="get" action="results.php">
<input id="keywords" name="keywords" class="searchBar" title="What do you like...?" type="text" maxlength="255" value=""/>
<input type="button" class="searchButton" />
<input type="hidden" name="form_id" value="297586" />
</form>
</div>
Here's what my browser is rendering:
Safari
Opera
When I mouseover the button, it is correctly switching, and then will display the entire button. I'm not sure why this behavior is happening.
Thoughts?
Buttons have a lot of default styling attached to them. Consider implementing a reset stylesheet, like:
Eric Meyer's Reset
Normalize.css
Also, an element must be set to display: block or display: inline-block in order for dimensions to be able to be set on it.
Finally, I recommend that you put a simplified example of your problem into JSFiddle or Dabblet so that it's easier for people to help you out.
Hope this helps!
EDIT: Now that I can see your example, the problem is that the default styles in bootstrap.css have a higher specificity than your styles. Something like:
input.searchButton
Should solve the problem.
This is probably a case of specificity, where a more specific set of conditions is taking precedence.
Try this:
.searchButton {
height: 31px !important;
width: 33px !important;
cursor: pointer;
border: none;
background:url(../img/searchButton-Off.png) no-repeat;
}
Or you could try:
form.appnitro .searchButton {
wrong!
you have
you have too use :
input[type=button].[class name]
or you can use:
<button class='x' ></button>
and Css:
button.x{
}
background: url("../img/searchButton-Off.png") white no-repeat 9px;
just change 9px to any px and do it accordingly and also increase height:50px weight:50px