|
CSS - How To Create Css Rule That Applies Only To Input Element Which Type Is Submit
So, what would I like to have?
A css rule that would affect visual appearance of only the <input type="submit"> elements (or any other sub-type of <input>, but again, affecting that sub-type only). Is it possible to do? How? I have a lot of .NET pages with a LOT of submit buttons (within datagrids and regular buttons too). There is a way to do it programaticaly in source code of .NET pages, but I'd like an elegant solution like css, which could be done without recompiling entire project. Any help is highly appreciated. Similar TutorialsI found this great website that shows me how to create these great buttons with some images. http://www.dynamicdrive.com/style/csslibrary/item/css_oval_buttons/ How can I do this with a button instead of a link??? I'm customizing an IP Board (version 3.2.1). I've set up a test board and when I've got it how I want it I'm going to export it as a skin which I'll install on a live board. In the current version of IP Board, the post title is above the main title bar in post view, whereas in the previous version, the post title was in the main title bar, which is where I want it. One of the IPB boffins gave me a code mod which enabled me to place the post title in the main title bar. The problem is the standard code that governs the post title also governs the forum title (pictured below) in forum view. I need to get rid of this title (circled) in order to reduce some of the space between the header and the main title bar. But if I comment out this title, I also comment out the post title. According to the guy who was helping me, the only way around this is to create a new class, which is beyond his expertise -- and way beyond mine. How do I do this, or is there an alternative and hopefully simpler solution? Many thanks! This is the code in question. Code: .ipsType_pagetitle, .ipsType_subtitle { font: 300 16px/1.3 Helvetica, Arial, sans-serif; color: #141719;}
The circled title is what I want to remove. http://www.thechristianidentityforum.net/smf/pix/screenshot.jpg The code also affects the post title in post view, which is why I need a new rule set/class, so I can delete the forum title in forum view but not the post title. http://www.thechristianidentityforum.net/smf/pix/screenshot2.png EDIT: For some reason the images won't display in the post. They display in preview but not when posted. Just click on the urls to see the pix. I apologize if I've broken a forum rule or two in doing this. Hi; i am trying to write a register form for user. i got a problem that the sign up of submit bottom doesn't sit properly after fill some invalid input and click the sign up bottom. but before fill anything to form, everything sit ok, no problem at all. And this problem happens in the IE browser, not in the Firefox browser. Could anyone help me find out the problem, please. please go to the link. http://writeanything.org/Register.php valid password 1) at least 8 char 2) at one lower char 3) at least one upper char 4) at least one digit please fill some invalid input to see the different before and after that. my code as following: Register.php PHP Code: <?php session_start(); ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title> Welcome to login </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <head> <style type="text/css"> body{ padding: 0px; margin: 0px; border: 0px; background-color: white; } #container{ padding: 0px; border-top: 2px solid #1d2add; border-bottom: 2px solid #1d2add; border-left: 1px solid #3b44b5; border-right: 1px solid #3b44b5; margin-left: auto; margin-right: auto; margin-top: 5%; margin-bottom: auto; width: 330px; height: 370px; } #t1{ font-weight: bold; font-size: 18px; color: white; background-color:#3542eb; } form{ padding:0px; border: 0px; margin: auto; width: 280px; } #JoinMe { background-color: #41ac1c; padding: 2px; border: 2px solid #94e07a; color: white; font-size: 12px; font-weight: bold; } #JoinMe:hover { background-color: #237516; border: 2px solid #104108; padding: 2px; } table{ padding: 0; border: 0; margin: 0; } tr{ padding: 0; border: 0; margin: 0; } td{ padding: 0; border: 0; margin: 0; } .errorM{ padding:0; margin:0; font-weight: bold; font-size: 12px; color: red; background-color:white; } </style> </head> <body> <div id="container"> <form action="/RegisterP2.php" method="post"> <table> <tr><td colspan="2" id="t1">Welcome to join xxxx</td></tr> <?php if($_SESSION['register_flag']==0) echo ("<tr><td colspan=\"2\" class=\"errorM\">some invalid field below, please reenter again.</td></tr>"); ?> <tr><td> Email Address:</td><td><input type="text" name="email" maxlength="60" value="<?php if($_SESSION['register_flag']==0) echo $_SESSION['register_email']; ?>"><?php if($_SESSION['register_errorM_Email']!="") { echo "<span class=\"errorM\">"; echo $_SESSION['register_errorM_Email']; echo "</span>"; } ?></td></tr> <tr><td>Password:</td><td><input type="password" name="pass1" maxlength="30"><?php if($_SESSION['register_errorM_Password']!="") { echo "<span class=\"errorM\">"; echo $_SESSION['register_errorM_Password']; echo "</span>"; } ?></td></tr> <tr><td>Confirm Password:</td><td><input type="password" name="pass2" maxlength="30"><?php if($_SESSION['register_errorM_Password']!="") { echo "<span class=\"errorM\">"; echo $_SESSION['register_errorM_Password']; echo "</span>"; } ?></td></tr> <tr><td colspan="2"><hr></td></tr> <tr><td> Display Name:</td><td><input type="text" name="DisplayName" maxlength="30"></td></tr> <tr><td> First Name:</td><td><input type="text" name="FirstName" maxlength="30"></td></tr> <tr><td>Last Name:</td><td><input type="text" name="LastName" maxlength="30"></td></tr> <tr><td>Country:</td><td><input type="text" name="Country" maxlength="30"></td></tr> <tr><td>State or City:</td><td><input type="text" name="StateCity" maxlength="30"></td></tr> <tr><td colspan="2"><hr></td></tr> <tr><td>Age</td><td><input type="text" name="age" maxlength="30"></td></tr> <tr><td>Gender:</td><td><input type="radio" checked="checked" name="Sex" value="male">Male <input type="radio" checked="checked" name="Sex" value="female">Female </td></tr> <tr><td colspan="2" align="right"> <input type="submit" name="Join" value="Sign Up" id="JoinMe"></td></tr> </table> </form> </container> </body> </html> ///////////////// RegisterP2.php PHP Code: <?php session_start(); //error massage for validate form $_SESSION['register_errorM_Email']=""; $_SESSION['register_errorM_Password']=""; //flag to check user input, 1=valid, 0=invalid $_SESSION['register_flag']=1; if(isset($_POST['Join'])){ $email_pattern = '#.*@.*\..*#'; $_SESSION['register_email'] = $_POST['email']; //email pass validation; if (preg_match($email_pattern, $_POST['email']) > 0) { } else{ //not validate $_SESSION['register_errorM_Email']="**"; $_SESSION['register_email'] =""; $_SESSION['register_flag']=0; } $password1 = $_POST['pass1']; $password2 = $_POST['pass2']; //valid if ($password2==$password1) { } else { $_SESSION['register_errorM_Password']="**"; $_SESSION['register_flag']=0; } //valid if (preg_match("/^.*(?=.{8,})(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).*$/", $password1)) { } else { $_SESSION['register_errorM_Password']="**"; $_SESSION['register_flag']=0; } //valid if (preg_match("/^.*(?=.{8,})(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).*$/", $password2)) { } else { $_SESSION['register_errorM_Password']="**"; $_SESSION['register_flag']=0; } if( $_SESSION['register_flag']==1) header('Location:RegisterP3.php'); else header('Location:Register.php'); } ?> Hello. I'm trying to do this: Code:
input, textarea, select { COLOR: #000000; FONT-FAMILY: Verdana, Arial,
helvetica; FONT-SIZE: 10px! important; border: 1px #000000 solid;
}
input[type=radio] {COLOR: #000000; FONT-FAMILY: Verdana, Arial,
helvetica; FONT-SIZE: 10px! important; border: 0px #000000 solid;}
input[type=checkbox] {COLOR: #000000; FONT-FAMILY: Verdana, Arial,
helvetica; FONT-SIZE: 10px! important; border: 0px #000000 solid;}
But my checkboxes and radiobuttons still has a black border. WHY!? I include two diffrent css-files in my webpage. And "input, textarea, select" is set again in the second css-file. The reason for that system is that the second css-file is diffrent depending on what design the user has chosen... Is that a problem? as the subject says... input[type="text"] ...works great for opera/moz, can't figure out how to do the same thing with IE. plz help Hi there, I know there are some threads going on on this subject, but none have a good end conclusion. The issue is the appearance of the search button in a <input type="file">. CSS seems to have no grip on this. I know there is some tricky javascript way around this, but that a far from elegant solution. Are those the final words on this or does anyone around here, knows a CSS solution, or an atractive php or javascript solution? I hope to hear more, kind regards Game I'm trying to figure out how come the setting for the "base" <div> applies the margin rules to the <ul> in this example (see halveway down the article) URL and it does not work for me when I re-create the same code here URL As far as I can tell I'm duplicating something that seems fairly simple. So the solution is probably a simple one, why doesn't the margin rules affect the <ul> tag in my HTML and why does it work in the example? Sincerely, Aaron S I seem to recall that CSS1 or 2 had a property that could be set to specify the height of a text input box or check box or radio button, but it's been a while since I've done it and I can't find it in my notes or find the search terms that will turn up what I'm looking for, or even the page that I did it on. I thought
Code: <input type="text" style="{ height: Xpx; }">
would do it, but it doesn't. Here's some of my code ... xhtml Code: Original - xhtml Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1"></meta> <meta http-equiv="Content-Language" content="en-US"></meta> <style type="text/css"> body { margin: 0px; padding: 0px; font: normal normal normal 12px/14px Veranda,Arial,sans-serif } div { } table { width: 100%; border: none } tr { } td { } .right { text-align: right } ul { margin: 0px; padding: 0px; list-style: none } li { padding-left: 25px } label { } input { font: normal normal normal 9px/11px Arial, Veranda, sans-serif; } .textrightinput { text-align: right; height: 18px } .textleftinput { text-align: left; height: 18px } .buttoninput { height: 18px } </style> <title>Donations</title> </head> <body> <!-- Begin Body Table --> <div> <form id="form" action="https://my.domain.com/donate/" method="post"> <fieldset> <legend>Select the project(s) you wish to support.</legend> <input type="hidden" name="cc" value="checkEntries" /> <table> <tr> <td> <ul> <li><label><input type="checkbox" name="projects[]" value="Doin-it-Myself Hydropower Project" checked="checked" />Doin-it-Myself Hydropower Project</label></li> <li><label><input type="checkbox" name="projects[]" value="Joe Cell Development Project" checked="checked" />Joe Cell Development Project</label></li> <li><label><input type="checkbox" name="projects[]" value="Site Maintenance/Upkeep" checked="checked" />Site Maintenance/Upkeep</label></li> <li><label><input type="checkbox" name="projects[]" value="extra" onclick="javascript:enable('form','other')" /> Other: <input id="text" class="textleftinput" type="text" name="projects[]" value="blah blah" disabled="disabled" /></label></li> <li class="center"><label> Amount: $<input id="text" class="textrightinput" type="text" name="amount" value="25" title="Enter the dollar value you intend to donate." /></label></li> </ul> </td> </tr> <tr> <td class="right" colspan="2"> <input class="buttoninput" type="submit" value="Next⇒" title="Click to verify that we correctly received your entries." /> </td> </tr> </table> </fieldset> </form> </div> <!-- End Body Table --> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1"></meta>
<meta http-equiv="Content-Language" content="en-US"></meta>
<style type="text/css">
body { margin: 0px; padding: 0px; font: normal normal normal 12px/14px Veranda,Arial,sans-serif }
div { }
table { width: 100%; border: none }
tr { }
td { }
.right { text-align: right }
ul { margin: 0px; padding: 0px; list-style: none }
li { padding-left: 25px }
label { }
input { font: normal normal normal 9px/11px Arial, Veranda, sans-serif; }
.textrightinput { text-align: right; height: 18px }
.textleftinput { text-align: left; height: 18px }
.buttoninput { height: 18px }
</style>
<title>Donations</title>
</head>
<body>
<!-- Begin Body Table -->
<div>
<form id="form" action="https://my.domain.com/donate/" method="post">
<fieldset>
<legend>Select the project(s) you wish to support.</legend>
<input type="hidden" name="cc" value="checkEntries" />
<table>
<tr>
<td>
<ul>
<li><label><input type="checkbox" name="projects[]" value="Doin-it-Myself Hydropower Project" checked="checked" />Doin-it-Myself Hydropower Project</label></li>
<li><label><input type="checkbox" name="projects[]" value="Joe Cell Development Project" checked="checked" />Joe Cell Development Project</label></li>
<li><label><input type="checkbox" name="projects[]" value="Site Maintenance/Upkeep" checked="checked" />Site Maintenance/Upkeep</label></li>
<li><label><input type="checkbox" name="projects[]" value="extra" onclick="javascript:enable('form','other')" />
Other: <input id="text" class="textleftinput" type="text" name="projects[]" value="blah blah" disabled="disabled" /></label></li>
<li class="center"><label>
Amount: $<input id="text" class="textrightinput" type="text" name="amount" value="25" title="Enter the dollar value you intend to donate." /></label></li>
</ul>
</td>
</tr>
<tr>
<td class="right" colspan="2">
<input class="buttoninput" type="submit" value="Next⇒" title="Click to verify that we correctly received your entries." />
</td>
</tr>
</table>
</fieldset>
</form>
</div>
<!-- End Body Table -->
</body>
</html>
Can you see what I'm doing wrong? screenshot.bmp At http://www.rietgors.tudelft.nl/combo/ you can see what I'm trying to do. I'd like the two elements to have either the same top or bottom, or have both elements centered vertically in the enclosing DIV. Can this be done using just CSS? Hi guys, Let's say I have 2 inputs: <input ... /> and <input type="submit" ... :> How do I grap the type="submit" input in CSS? For example: input submit {....} I know this does not work... Thank you I am using the following code. In firefox the input box (including the border) fits a nice box of 83 by 15. In IE it seems to not be so well, and is bothering things near it. Any ideas on how to rectify this? Code:
<td><input type="text" class="loginbox" size="13" /></td>
.loginbox
{
border: 1px;
border-style: solid;
border-color: #9AA8C3;
padding: 0;
margin: 0;
text-decoration: none;
font-size: 11px;
color: #40668C;
}
on a page i have a <input type="file"> tag for upload purposes. I want that thing have the following look:
no borders
'Courier New' font
a height of 16 pixels
a font-size of 14 pixels
a special background color
and a paddin of 0 pixels
I have made the apropriate CSS definitions: Code: <style type="text/css">
input {
height: 16px;
border-width: 0px;
background: #e0e0e0;
padding: 0px;
font-size: 14px;
font-family: Courier New;
}
</style>
The problem is that Mozilla does not fully implement these definitions. Mozilla makes the height and the background of the textfield-part the way i specified. The rest is left the way it is. I would appreciate any help you could give me. is there any way to change the style of the "Browse..." button on the <input type="file"/> tag? for instance, setting background-color will only change the text box of the tag and not the button. Hi, I have sort of a strange problem. I'm making a centered website, and I have a shopping cart image which is actually a submit button for a form. If I make it just a plain image it looks like this: http://www.rit.edu/~jtn5684/test/index1.html However, when it's an <input type="image"> (which is what I need) it moves it drastically. http://www.rit.edu/~jtn5684/test/index2.html My styles are he http://www.rit.edu/~jtn5684/test/styles.css Any idea how to make index2 look like index1 while using <input type="image">? Thanks! Jon Hi, I'm not overly accomplished when it comes to CSS so here's my question. I've got the following HTML code: Code: <input type="text" name="field1" value="value1" style="width:100%"> I'm preloading a value into this text field which may run past the visible length of the textbox. The text box is situated inside a table cell. The text box fills the table cell space completely whilst the text inside it does not run over but once the text is more than can be displayed in the space provided by the table cell, it forces the textbox to grow. My question is, is there a way around this so that I can still instruct the textbox to be 100% width of the table cell without expanding when the text overflows. Thanks. Hi, I am putting together a design for a client and have a complex navigation menu made in CSS (the CSS menu was paid for from a third party). Now I have found out that it is not IE6 compliant because the maker of the menu falls into the 'nobody should use IE6 because it is too old and painful to code for, therefore I won't cater to it' camp. Apparently he doesn't mind cutting out 18% to 32% of visitors. So I am hoping someone here will recognise the behaviour and be able to suggest the fix. I feel sure it would be doable with one of those exception rules in the CSS, for IE6. Here is the site (work in progress still): http://southcarolinanightlife.com/ The CSS for the menu is he http://southcarolinanightlife.com/templates/tmpl_uni/css/menu/menu15.css Note how, with IE6, when you hover over navigation drop down menus, the submenus all appear at the extreme left, rather than beneath the menu item you are hovering over. In other browsers it seems to be just fine. Many thanks if anyone can assist. Kevin Ok what i want to happen is that when person clicks on a link i want a div to appear/be visible underneath that link. But i want that div to not take any space unless i click on a link. I recently did something similar BUT the div was taking the space but was just hidden. My page layout consists of a content section and a sidebar section. I'm attempting to match the style of the sidebar links to those within the content. Odd thing is, although the style of the links appears correctly within the content DIV, any links within the sidebar refuse to style correctly when declared with the content declaration. So, this works: Code: #content a, #copyright a, #footer a, .twitter a {background: #3cf; color: #fff; text-decoration: none; padding: 0 2px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-transition: all 0.3s ease-out;}
#sidebar a {background: #3cf; color: #fff; text-decoration: none; padding: 0 2px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-transition: all 0.3s ease-out;}
Whilst this does not: Code: #content a, #sidebar a, #copyright a, #footer a, .twitter a {background: #3cf; color: #fff; text-decoration: none; padding: 0 2px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-transition: all 0.3s ease-out;}
I'm at my wits end as to why the second (preferred) declaration will not style any sidebar links. Any ideas? I have all pages that follow a CSS Rule. These are Dev Boxes that I created for my site. One of the text on one of the pages is 1700 pixels height the others are only 700. When I created a rule for all pages but when I added the text on the one with 1700 pixels it stretched out all the boxes on all other pages as well. I want to break that one from the others so that it does not format all my pages like that one. How do I do it. I do I keep the CSS code style but on that one in particular change the rule to only allow that one to be 1700 pixels long. Basically I don't want to have to recode the CSS page but I want that particular code to be just for that one page and keep the others with the 700 pixels height. Please give me a simple explanation on how to break the rule on that page so that I can manually adjust it for that one page. thanks I am trying to create a separator bar that will act like a HTML <HR> If firefox it works like I want, but in IE it does not. In IE it only displays the width of the image file spacer.gif CSS: Code: .bar {
display: block;
position: absolute;
left: 50px;
right: 60px;
top: 280px;
height: 15px;
background-image: url(bar.gif);
}
HTML: Code: <div class="bar"><img src="spacer.gif"></div> |
|||||||