#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    5
    Rep Power
    0

    Exclamation 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
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    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.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    5
    Rep 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 &nbsp;&nbsp;&nbsp;</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>
    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.
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    Can you identify for me which input you want styled?

    Regards,

    NM.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    5
    Rep 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>
  10. #6
  11. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    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.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    5
    Rep Power
    0
    Is there somewhere specific I need to put it in the CSS? didnt seem to change anything
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,126
    Rep Power
    4304
    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>.

    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.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    5
    Rep 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

IMN logo majestic logo threadwatch logo seochat tools logo