The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.
|
 |
|
Dev Shed Forums
> Web Design
> CSS Help
|
Remove CSS style from textfield?
Discuss Remove CSS style from textfield? in the CSS Help forum on Dev Shed.
Remove CSS style from textfield? Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.
|
|
 |
|
|
|
|
Dev Shed Forums Sponsor:
|
|
|
January 12th, 2013, 07:41 AM
|
|
Registered User
|
|
Join Date: Jan 2013
Posts: 5
Time spent in forums: 2 h 32 m 15 sec
Reputation Power: 0
|
|
Remove CSS style from textfield?
Hello,
I have a template that I'm trying to edit and fit to my needs. I have a 4 digit pin number that I generate that looks like this.
Image doesnt appear to show (http://ica.sbbdev.com/other/pina.PNG)
Here is the CSS code for the tect fields. This applies the style to all text fields on the theme.
Code:
/* #Forms
================================================== */
form {
margin-bottom: 20px; }
fieldset {
margin-bottom: 20px; }
input[type="text1"],
input[type="password"],
input[type="email"],
textarea,
select {
border: 0px;
padding: 5px;
outline: none;
font: 60px "Open Sans", sans-serif;
color: #fff;
margin: 0;
width: 80px;
max-width: 100%;
text-align:center;
margin-bottom: 20px;
background: transparent;
behavior: url(PIE.htc);}
select {
padding: 0; }
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
border: 0px;
color: #fff; }
textarea {
min-height: 60px; }
label,
legend {
display: block;
font-weight: bold;
font-size: 13px; }
select {
width: 220px; }
input[type="checkbox"] {
display: inline; }
label span,
legend span {
font-weight: normal;
font-size: 13px;
color: #444; }
My problem is, I need to have one normal text field but when I add it, it styles it like the others so it messes it all up.
How can I format (or unformat i should say) a text field that a style is being applied to?
Thanks for any and all help 
|
January 12th, 2013, 08:10 AM
|
 |
Contributing User
|
|
Join Date: Aug 2011
Location: The Pleiades
|
|
|
At the moment you have styled form inputs globally meaning it will affect all form inputs on the page.
Can you post your HTML? I have a few ideas you can try but I'd need to see which one.
You can either try selecting the individual input using nth-last-child(#), you could give it an inline style because inline styles have higher precedence.
Post your code and I may be able to write something up for you.
Regards,
NM.
|
January 12th, 2013, 08:17 AM
|
|
Registered User
|
|
Join Date: Jan 2013
Posts: 5
Time spent in forums: 2 h 32 m 15 sec
Reputation Power: 0
|
|
thanks so much
Below is the html for the page the text fields are on. Because there is PHP that needs to be activate to see the text field. Feel free to add it anywhere to test.
Code:
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]><html class="ie ie9" lang="en"> <![endif]-->
<!--[if !(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8" />
<title> - Quick Account Lookup</title>
<!-- Force IE Behavior -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
<!-- CSS
================================================== -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="assets/stylesheets/base.css" type="text/css">
<link rel="stylesheet" href="assets/stylesheets/grid.css" type="text/css">
<link rel="stylesheet" href="assets/stylesheets/colorbox.css" type="text/css">
<link rel="stylesheet" href="assets/stylesheets/aurora.css" type="text/css">
<link rel="stylesheet" href="assets/stylesheets/themes/blue.css" type="text/css" id="theme">
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="assets/images/favicon.ico">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body class="silence">
<!-- Primary Page Layout
================================================== -->
<div id="wrap">
<div class="container">
<!-- Header -->
<header class="twelve columns" id="header">
<form action="index.php" method="post" name="agent">
<a href="index.php"><img src="assets/images/logo/blue.png" border="0" title="Click to Reset"></a>
<!-- top right bar -->
<div class="eight columns omega right" id="message" display:table-cell; vertical align:middle>
<div class="message-text" id="ticker" align="middle"><br /><?php if($emp_saved == "ICA"){ ?><b>You are currently viewing account: </b><span id="accnum">NONE</span><?php }elseif ($emp_saved == "Agent"){ ?> <b>Please enter account number: </b><input type="text" name="account" maxlength="20" style="color:#6fa6cc;" autocomplete="off" autofocus="autofocus"> <input type="submit" name="Create Pin" value="Create Pin"><?php } ?> </div>
</div>
</form>
<?php echo $error; ?>
</header>
<!-- Text -->
<section class="twelve columns" id="content">
<h2>Account Lookup</h2>
<?php if ($emp_saved == "ICA"){?><p>Please enter the 4 digit pin below provided by an agent to pull up their account for support.</p><?php } else { ?> <p>Please provide the 4 digit pin to ICA.</p> <?php } ?>
</section>
<!-- Core -->
<section class="twelve columns">
<!-- Pin -->
<div class="eight columns alpha" id="pin-wrap">
<div id="pin">
<?php if ($emp_saved == "ICA"){ ?>
<form name="lookup" id="lookup" action="index.php" method="get">
<div class="two columns alpha" align="top"><input type="text1" name="1" value="*" maxlength="1" tabindex="1" autofocus="autofocus" id="1" onkeyup="moveOnMax(this,'2');" onFocus="this.value=''" onkeydown="validateNumber(event);" autocomplete="off"></div>
<div class="two columns" align="top"><input type="text1" name="2" value="*" maxlength="1" tabindex="2" id="2" onkeyup="moveOnMax(this,'3');" onFocus="this.value=''" onkeydown="validateNumber(event);" autocomplete="off"></div>
<div class="two columns" align="top"><input type="text1" name="3" value="*" maxlength="1" tabindex="3" id="3" onkeyup="moveOnMax(this,'4');" onFocus="this.value=''" onkeydown="validateNumber(event);" autocomplete="off"></div>
<div class="two columns omega" align="top"><input type="text1" name="4" value="*" maxlength="1" tabindex="4" id="4" onFocus="this.value=''" onkeydown="validateNumber(event);" onkeyup="moveOnMax(this,'message');" autocomplete="off"></div>
</form>
<?php }elseif ($emp_saved == "Agent") { ?>
<div class="two columns alpha" align="top"><input type="text1" name="1" value="<?php echo $arr['0']; ?>" maxlength="1" DISABLED></div>
<div class="two columns" align="top"><input type="text1" name="2" value="<?php echo $arr['1']; ?>" maxlength="1" DISABLED></div>
<div class="two columns" align="top"><input type="text1" name="3" value="<?php echo $arr['2']; ?>" maxlength="1" DISABLED></div>
<div class="two columns omega" align="top"><input type="text1" name="4" value="<?php echo $arr['3']; ?>" maxlength="1" DISABLED></div>
<?php } ?>
<?php if ($_GET['e'] == "invalid"){ ?><font color="red"><b>(X)</b> <i>Invalid or Expired Pin Number</font></i><?php } ?>
<?php echo $msg; ?>
</div>
</div>
<p align="center"><img src="assets/images/left.png"></p>
<!-- right side -->
<!--</div>-->
</section>
<!-- Footer -->
<footer class="twelve columns" id="footer">
<div class="six columns alpha" id="about">
<a href="#aboutinfo"><span></span> About </a> <a href="#settings"><span2></span2> Settings</a>
</div>
</footer>
</div>
</div>
<!-- About
================================================== -->
<div style="display: none;">
<div id="aboutinfo">
<h2>About</h2>
<p>This tool was made to help ICA pull up accounts faster when provided a 4 digit pin by an agent.
<br /><br />To set up your prefrences, click on the settings icon on the main page. From there you can specifiy which pages to load for the account.<br /><br />If you experience any problems or have suggestions, please email*EMAIL HERE*</a><br />
</p>
<div id="response" style="display: none;"></div>
</div>
<div id="settings">
<h2>Settings</h2>
<form name="settings" action="index.php" method="post">
<p>Please select the tools you wish to pull-up automatically when launching an account.</p>
<label for="fop"><input type="checkbox" id="fop" value="1" name="fop" <?php
if ($fop_saved == "1") {
echo "checked";
}
?>/> FOP</label>
<br />
<label for="admin_tools"><input type="checkbox" id="admin_tools" value="1" name="admin_tools" <?php
if ($admin_tools_saved == "1") {
echo "checked";
}
?>/> Admin Tools</label>
<br />
<label for="rc2"><input type="checkbox" id="rc2" value="1" name="rc2"<?php
if ($rc2_saved == "1") {
echo "checked";
}
?> /> RCII</label>
<br />
<label for="txn"><input type="checkbox" id="txn" value="1" name="txn"<?php
if ($txn_saved == "1") {
echo "checked";
}
?> /> Transaction Log</label>
<br />
<hr>
<p>Please choose your correct role. ICA will prompt for a pin to be entered and agents will be given the pin for the account they are working.</p>
<label for="agent"><input type="radio" name="emp" value="Agent" <?php
if ($emp_saved == "Agent") {
echo "checked";
}
?>> Agent</label>
<br />
<label for="ica"><input type="radio" name="emp" value="ICA" <?php
if ($emp_saved == "ICA") {
echo "checked";
}
?>> ICA</label>
<p></p>
<input type="submit" name="submit" value="Save Settings">
<input type='hidden' name='submit' />
</form>
<div id="response" style="display: none;"></div>
</div>
</div>
<!-- Javascript
================================================== -->
<script src="assets/javascripts/jquery-1.8.0.min.js?token=<?= date('U') ?>" type="text/javascript"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='/assets/javascripts/jquery-1.8.0.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<?php echo ThumbsUp::javascript() ?>
<script src="assets/javascripts/jquery.colorbox.js?token=<?= date('U') ?>"></script>
<script src="assets/javascripts/global.js?token=<?= date('U') ?>"></script>
</body>
</html>
Quote: | Originally Posted by Nanomech At the moment you have styled form inputs globally meaning it will affect all form inputs on the page.
Can you post your HTML? I have a few ideas you can try but I'd need to see which one.
You can either try selecting the individual input using nth-last-child(#), you could give it an inline style because inline styles have higher precedence.
Post your code and I may be able to write something up for you.
Regards,
NM. |
|
January 12th, 2013, 09:37 AM
|
|
Contributing User
|
|
Join Date: Aug 2011
Location: The Pleiades
|
|
|
Can you identify for me which input you want styled?
Regards,
NM.
|
January 12th, 2013, 09:40 AM
|
|
Registered User
|
|
Join Date: Jan 2013
Posts: 5
Time spent in forums: 2 h 32 m 15 sec
Reputation Power: 0
|
|
Near the top of the page :
Code:
<b>Please enter account number: </b><input type="text" name="account" maxlength="20" style="color:#6fa6cc;" autocomplete="off" autofocus="autofocus"> <input type="submit" name="Create Pin" value="Create Pin"><?php } ?> </div>
|
January 12th, 2013, 09:57 AM
|
|
Contributing User
|
|
Join Date: Aug 2011
Location: The Pleiades
|
|
Ok, give that element an ID of say 'normal_field':
Code:
<input type="text" name="account" id="normal_field" etc etc />
Then in your CSS, target it like this:
Code:
input[type="text"]#normal_field
{
background: #fff;
border: none;
}
By being more specific with your selectors, I believe it should overwrite your global styles.
Let me know.
Regards,
NM.
|
January 12th, 2013, 10:26 AM
|
|
Registered User
|
|
Join Date: Jan 2013
Posts: 5
Time spent in forums: 2 h 32 m 15 sec
Reputation Power: 0
|
|
|
Is there somewhere specific I need to put it in the CSS? didnt seem to change anything
|
January 12th, 2013, 01:41 PM
|
 |
CSS & JS/DOM Adept
|
|
Join Date: Jul 2004
Location: USA
|
|
Welcome to DevShed Forums, carlhussey.
Which browsers, including versions numbers, are you testing in?
By the way, that <b> element should really be in a <label>.
Quote: | Originally Posted by Nanomech Ok, give that element an ID of say 'normal_field' |
Why use an ID for this, especially when you call it "normal_field"? That sounds like a good class name. Just because it's the only field that will have it does not mean an ID is needed. If one really did want to use an ID related to the fields name, e.g. "account_field", would be more meaningful.
Also it's unusual to specify other selectors for an element when you're using an ID, especially an attribute selector. In most cases "#normal_field" is plenty, the 'input[type="text"]' is unnecessary.
|
January 12th, 2013, 01:59 PM
|
|
Registered User
|
|
Join Date: Jan 2013
Posts: 5
Time spent in forums: 2 h 32 m 15 sec
Reputation Power: 0
|
|
|
Thanks everyone for the reply; I did manage to get it working using the help provided.
I just needed to get it working in ie7 (which i dont like) but its the only one we support at work where the project will be used
|
Developer Shed Advertisers and Affiliates
| Thread Tools |
Search this Thread |
|
|
|
| Display Modes |
Rate This Thread |
 Linear Mode
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
