Here are my buttons:
<body>
<form name="form1">
<span id="buttons">
<input type="button" name="button1" value="6"/>
<input type="button" name="button2" value="4"/>
<input type="button" name="button3" value="2"/>
</span>
</form>>
</body>
I cant for the life of me get them to be styled in css, I just dont know their identifier?
currently I'm using
<style>
#buttons {
"css style is here"
}
and that looks REALLY BAD
another method I tried was
<style>
input[type="button"] {
"css style is here"
}
which is exactly what I wanted, BUT absolute positioning made them all bunch up in the exact same space and I found no way to separate them.
I need either a way to clasify them and style them seperatly OR to space them when using the second method
"sidenote" Here's the css styling I used that caused them to bunch up:
<style>
input[type="button"] {
background:linear-gradient(to bottom, #44c767 5%, #05aaf7 100%);
display:inline-block;
border-radius:6px;
border:0px solid #83c41a;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
position:absolute;
left: 45%;
top: 30%;
}
</style>
Related
Hi i want to make a customized input text box like this image:
I search many articles but found nothing to do this so please help me
This is not a new answer. But some modification to answer of #alvaro-menéndez to make it more compact and generic.
div {
position:relative;
display:inline-block;
margin:50px;
}
input[type="text"] {
width:300px;
padding:10px;
outline:0;
border:0;
background-color: #eee;
}
.preinput {
position:absolute;
z-index:-1;
display:block;
bottom:-1px;
left:-1px;
border-bottom:1px solid #999;
border-right:1px solid #999;
border-left:1px solid #999;
width:100%;
height:20px;
}
<div>
<span class="preinput"></span>
<input type="text" placeholder="Search" />
</div>
You could use this little and simple jquery to add an element after your input:
$(".input").after("<span></span>");
and then you just have to style it like in this FIDDLE
Edited: updated fiddle to put the element UNDER the input and move it slightly bottom and left so it will be visible even if input has a background-color
You can just use a css background image on your input. Use a placeholder attribute for you "search".
HTML
<input type="search" placeholder="Search" />
CSS
input[type="search"]{
background:url(your_image_path) left bottom no-repeat;
}
I have two buttons, the first as <a> tag, and the second as <input type="submit">.
I want to make the both like some.
The following is screenShot on firefox
Also the following is screenShot on IE7
HTML
<div id="loginForm">
<form action="login.php" method="post">
<label for="username">Username:</label>
<input type="text" name="username" id="username" /><br />
<label for="password">Password:</label>
<input type="password" name="password" id="password" /><br /><br />
<input type="submit" name="sbmtLogin" value="Sign in" />
Sign up
</form>
</div>
CSS
body {
margin:0;
padding:0;
}
div#loginForm {
width:270px;
max-width:270px;
margin:100px auto;
padding:10px;
text-align:center;
background-color:#8de3fd;
}
div#loginForm input[type=text], div#loginForm input[type=password] {
border:1px solid #9a9a9a;
width:150px;
margin:3px;
padding:5px;
color:#5b5b5b;
}
div#loginForm label {
display:inline-block;
width:70px;
}
div#loginForm input[type=submit] {
border:1px solid #9a9a9a;
width:50%;
padding:5px;
background-color:#f2f2f2;
color:#5b5b5b;
font: bold 16px arila;
}
div#loginForm a {
border:1px solid #9a9a9a;
background-color:#f2f2f2;
color:#5b5b5b;
padding:5px;
text-decoration:none;
font: bold 16px arila;
}
You can see also JsFiddle online demo
Try giving display:inline-block to your <a> tag. This is just a float issue. Your anchor tag does not have any float.
sometimes ie wont work some codes correctly...so that time we should use conditional stylesheets...Here u can use a new stylesheet that include in <head> with conditional code like this
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css">
<![endif]-->
you can specify your class property whatever you want....it reflect ie7 only...
you can check more here : http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
OR
you can use ie syntax hack..it is so simple and no more stylesheets use for in a site...
.class {
background: gray; /* standard */
background: pink\9; /* IE 8 and below */
*background: green; /* IE 7 and below */
_background: blue; /* IE 6 */
}
ie syntax hack : http://webdesignerwall.com/tutorials/css-specific-for-internet-explorer
Hope this help you....
I have a text field and button with following css:
JS fiddle link : http://jsfiddle.net/Tdkre/
.submit {
-moz-box-shadow:inset 0px 1px 0px 0px #cae3fc;
-webkit-box-shadow:inset 0px 1px 0px 0px #cae3fc;
box-shadow:inset 0px 1px 0px 0px #cae3fc;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #4197ee) );
background:-moz-linear-gradient( center top, #79bbff 5%, #4197ee 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#4197ee');
background-color:#79bbff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #469df5;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:14px;
font-weight:bold;
padding:5px 14px;
text-decoration:none;
text-shadow:1px 1px 0px #287ace;
cursor:pointer;
}
.submit:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4197ee), color-stop(1, #79bbff) );
background:-moz-linear-gradient( center top, #4197ee 5%, #79bbff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4197ee', endColorstr='#79bbff');
background-color:#4197ee;
}
.submit:active {
position:relative;
top:1px;
}
.text-input {
padding: 6px;
font-size: 13px;
border: 1px solid #d5d5d5;
color: #333;
border-radius: 4px 4px 4px 4px !important;
}
<form>
<input type="text" class="text-input" size="40"/>
<input type="button" value="Upload" id="upload" class="submit"/>
</form>
I want to add the same style to the file upload input type. I am a css beginner. How can i use this style to file upload button?
Try this solution: http://jsfiddle.net/JJRrc/1/
Html
<p class="form">
<input type="text" id="path" />
<label class="add-photo-btn">upload
<span>
<input type="file" id="myfile" name="myfile" />
</span>
</label>
</p>
CSS
.form input[type="file"]{
z-index: 999;
line-height: 0;
font-size: 50px;
position: absolute;
opacity: 0;
filter: alpha(opacity = 0);-ms-filter: "alpha(opacity=0)";
cursor: pointer;
_cursor: hand;
margin: 0;
padding:0;
left:0;
}
.add-photo-btn{
position:relative;
overflow:hidden;
cursor:pointer;
text-align:center;
background-color:#83b81a;
color:#fff;
display:block;
width:197px;
height:31px;
font-size:18px;
line-height:30px;
float:left;
}
input[type="text"]{
float:left;
}
JQuery
$('#myfile').change(function(){
$('#path').val($(this).val());
});
I tried this it looks pretty good to me. Are there any flaws with this?
Here is the jsfiddle link http://jsfiddle.net/Tdkre/1/
#FileUpload {
position:relative;
}
#BrowserVisible {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
background:url(upload.png) 100% 1px no-repeat;
width:345px;
height:30px;
}
#FileField {
width:250px;
margin-right:85px;
padding: 6px;
font-size: 13px;
background: #fff url('bg-form-field.gif') top left repeat-x;
border: 1px solid #d5d5d5;
color: #333;
border-radius: 4px 4px 4px 4px !important;
}
#BrowserHidden {
position:relative;
width:345px;
height:30px;
text-align: right;
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
<div id="FileUpload">
<input type="file" size="24" id="BrowserHidden" onchange="getElementById('FileField').value = getElementById('BrowserHidden').value;" />
<div id="BrowserVisible"><input type="text" id="FileField" /></div>
Here are the images
You could also use jQuery, like this:
<img id="image" style="cursor:pointer;" src="img.jpg" />
<input type='file' style="display:none;" name="photosubmit" id="photosubmit"/>
And this jquery code
$("#image").click(function(){
$("#photosubmit").click();
});
Hopes this helps someone too!
try this:
In your css file put this on the end of file or somewhere else: input[type="file"]::-webkit-file-upload-button.
This syntax is only for button style.
If you put there only: input[type="file"] you can style the array where you have filename.
It is notoriously hard to style file upload buttons, but if you are willing to use jQuery and a plugin I've found this one to be very useful.
It gives you the posibility to "fake" file upload button functionality on any DOM element, so you can style it any way you want. Works well in all major browsers including old IE versions.
I run this relatively short jQuery on my page that contains one or more unaltered html <input type="file"> elements.
The jQuery will hide the elements and insert new ones where appropriate that mimic the same behaviour.
This answer is similar to others on the page but has been tested in IE browsers as well as the ones whose developer's actually take the time to support carefully considered web standards.
$(document).ready(function(){
// replace all file upload elements for styling purposes
$('input[type="file"]').each(function(){
var btn = $('<button class="file">Browse...</button>');
var txt = $('<span class="file"></span>');
$(this).after(txt).after(btn);
$(this).css({display:'none'});
var target = this;
$(btn).click(function(ev){
ev.preventDefault();
$(target).click();
})
$(target).change(function(){
// IE uses a stupid renaming scheme that includes "fake-path"
var fname = $(target).val()
$(txt).html(fname.substr(fname.lastIndexOf('\\')+1));
});
});
});
Now you just need to style button.file and span.file as you like and you are good to go.
Here is a link. You can change style of button.
HTML
<button>upload</button>
<input type="text" id="f" disabled="disabled" />
<input id="html_btn" type='file' " /><br>
CSS
button {
border-radius:10px;
padding:5px;
}
#html_btn {
display:none;
}
Javascript
$('button').bind("click", function () {
$('#html_btn').click();
});
$('#html_btn').change(function () {
document.getElementById("f").value = $('#html_btn').val();
});
Simple Solution: Custom file upload button with css only
.fileUpload input[type=file]{
display:none;
}
.btn{
background-color:#e3e3e3;
color:#333;
border:1px solid #e6e6e6;
border-radius:3px;
padding:6px 12px;
font-size:16px;
}
<label class="btn fileUpload btn-default">
Browse <input type="file" hidden="">
</label>
You can use pseudo attribute to apply css to upload button.
<input type="file"/>
input::-webkit-file-upload-button
{
background:blue;
color:white;
/* like this add your style */
}
Please enable show user agent shadow DOM to inspect shadow elements
Go to Browser >> DevTool (F12) >> settings >> Preferences >> Elements
I have a problem with my search box. I'm trying to make the text field and button the same height, but I can't get it right in all browsers. Here is the code: http://codepen.io/anon/pen/ygCFz . This method works fine in Firefox, but not in Chrome.
So what would be the best method to have an equal height and position for both the text field and button?
Thanks!
//edit: because someone asked for the code for further reference, here it is:
HTML
<form id="search" action="" method="get">
<input type="text" name="search" class="sfield" value="search and go"/>
<input type="submit" value="Search" class="sbutton"/>
</form>
CSS
input.sfield{
background-color:#fff;
border-color:#cecece;
border-style:solid;
border-width:1px 0 1px 1px;
font-size:0.9em;
line-height:1em;
height:26px;
}
input.sbutton{
background-color:#d91515;
height:inherit;
border:none;
color:#fff;
position:relative;
left:-6px;
bottom:-1px;
height:28px;
}
Use padding instead height on input elements. Line-height should be exactly the same as font-size for Firefox. So if you want you font-size to 16px, put your line-height to 16px and add padding at top and bottom. For your submit button, use absolute positionning to be sure it will be at top:0 and bottom:0. Just add padding-left for submit button width equivalent on input and it's all done !
#search {
position:relative;
display:inline-block;
}
input.sfield{
background-color:#fff;
border-color:#cecece;
border-style:solid;
border-width:1px 0 1px 1px;
font-size:0.9em;
line-height:1;
padding:5px;
display:inline-block;
padding-right:50px;
}
input.sbutton{
background-color:#d91515;
border:none;
color:#fff;
position:absolute;
top:0px;right:0px;bottom:0px;
width:50px;
}
You can either set a definite height property for both elements or you can simply tell Sbutton to inherit the styles from Sfield.
<input type="submit" value="Search" class="sfield sbutton"/>
I also adding a bit of padding to make it even.
http://codepen.io/anon/pen/zBlwD
HTML:
<form id="search" action="" method="get">
<input type="text" name="search" class="sfield" value="search and go"/><input type="submit" value="Search" class="sbutton"/>
</form>
CSS:
input.sfield{
background-color:#fff;
border-color:#cecece;
border-style:solid;
border-width:1px 0 1px 1px;
font-size:0.9em;
line-height:0.9em;
height:26px;
margin: 0;
}
input.sbutton{
background-color:#d91515;
height:inherit;
border: 1px solid #d91515;
color:#fff;
position:relative;
margin: 0;
height:30px;
}
Well, I hope the solution isn't this simple, but you have height defined twice in your rule for the sbutton class:
input.sfield{
background-color:#fff;
border-color:#cecece;
border-style:solid;
border-width:1px 0 1px 1px;
font-size:0.9em;
line-height:1em;
height:26px;
}
input.sbutton{
background-color:#d91515;
height:inherit; //that's one
border:none;
color:#fff;
position:relative;
left:-6px;
bottom:-1px;
height:28px; //that's two
}
See what happens when you get rid of one. It should work. Also take a look at the line-height rule for your textbox. If the font size is different than the line height, that would explain why the sizes are different. Firefox and Chrome use different conversions from ems to pixels and vice versa.
Using CSS3 I am trying to display search box with glass image. I am doing it basically by placing a image on text box and setting its left-margin. My code is here:
<body>
<form id="header-search">
<input type="text" class="searchbox" /><input type="submit" class="button" value="" />
</form>
</body>
#header-search{overflow:auto;}
#header-search input.searchbox
{
border-bottom-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-bottom-left-radius:5px;
border-top-left-radius:5px;
-webkit-top-left-radius:5px;
-moz-left-radius:5px;
border:1px solid #8e8e8e;
background-color:white;
height:16px;
padding:4px;
padding-left:28px;
padding-right:10px;
color:#4a4a4a;
float:left;
}
#header-search input.button{
border:0px dashed red;
padding:0;
margin:0 0 0 -185px;
width:24px;
height:24px;
background:transparent url(../images/SearchImage.png) center center no-repeat;
float:left;
}
UPDATE
I am not using em rather px
I have tried different css reset.
please see image for details difference.
I have done this code in new css/ html file where there is no other line of code.
Using position:absolute seems to be a more reliable approach for this kind of thing.
HTML
<form id="header-search">
<div class='relative'>
<input type="text" class="searchbox" /><input type="submit" class="button" value="" />
</div>
</form>
CSS
.relative {
position:relative;
}
.relative .button {
position:absolute;
left: 20px;
z-index:1;
}
You may want to make this css more specific to this search input rather than all .button's etc
Its because you are not specifying a width of your search input box.
If you do that, you method will work.
Else, of course, the better way is to use position:absolute to position your button.
This will ensure the layout across all browsers.
If you want to place image for search input box , you can try this http://jsfiddle.net/HmKZQ/1/
If you need the button for click then you can try this
http://jsfiddle.net/HmKZQ/3/