How do I change the border width of a text field in CSS?

I have this HTML code, but I still do not understand how someone(a guy who helped me) made the text fields for my form rounded. I mean, I don’t even see the code for it. Anyway, all I want is the border width of the two text fields to be changed to 2px in width. That way, they will stand out lots better.

Here is the code for the form:

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<style media="screen">
.af-textWrap {
    display: block; 
    text-align: center;
    color: #b7b7b7;
 }
.af-element {
  text-align: center;
 }
#awf_field-90534028,
#awf_field-90534029 {
    display: block; 
    width: 98%;
    max-width: 28.125em;
    margin: auto;
    text-align: left;
 }
.image {
    display: block;
    width: 98%; 
    max-width: 30em;
    height: auto; 
    margin: auto;
 }
</style>
</head>
<body> 
<div id="worked"></div>
<!-- AWeber Web Form Generator 3.0.1 -->
<form class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" method="post">
 <input name="meta_web_form_id" type="hidden" value="604218668">
 <input name="meta_split_id" type="hidden" value="">
 <input name="listname" type="hidden" value="awlist4661276">
 <input id="redirect_56ab2ff33416d920a3c24dc4d8e140f4" name="redirect" type="hidden" value="http://bloggingnetworkonline.com/InternetMarketing/?page_id=133&amp;preview=true">
 <input name="meta_adtracking" type="hidden" value="My_Web_Form">
 <input name="meta_message" type="hidden" value="1">
 <input name="meta_required" type="hidden" value="name,email">
 <input name="meta_tooltip" type="hidden" value="name||First Name...,,email||Best Email...">
  <div id="af-form-604218668" class="af-form">
    <div id="af-body" class="af-body af-standards">
    <div class="af-element">
 <label class="previewLabel" for="awf_field-90534028"></label>
  <div class="af-textWrap">
   <input id="awf_field-90534028" class="text" tabindex="500" name="name" type="text" placeholder="First Name...">
  </div>
 </div>

<div class="af-element">
 <label class="previewLabel" for="awf_field-90534029"></label>
   <div class="af-textWrap">
    <input id="awf_field-90534029" class="text" tabindex="500" name="email" type="text" placeholder="Best Email...">
   </div>
 </div>

<div class="af-element buttonContainer">
 <input id="af-submit-image-604218668" class="image" tabindex="502" alt="Submit Form" name="submit" src="https://hostedimages-cdn.aweber-static.com/MTE0ODQyNQ==/original/d316599087b84f9498e3854009bdad52.png" type="image"/>
</div>

<div class="af-element privacyPolicy">
 <p><strong>I respect your <a title="Privacy Policy" href="https://www.aweber.com/permission.htm" target="_blank" rel="nofollow">email privacy</a></strong></p>
  <div class="af-clear">&nbsp;</div>
</div>

</div>
  </div>
  <div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=bAwsTIwcbGwc" alt="">
  </div>
</form>
<!-- /AWeber Web Form Generator 3.0.1 -->
</body>
</html>

Thanks!

Have you validated your code?
https://validator.w3.org/nu/

Do you have a doctype on your page? For cross-browser consistency, you should always start your page with a doctype:

<!doctype html>
<html lang="en">

I see square corners in Firefox. What browser are you using?

The borders are already two px by default.

Try giving them a color by adding this rule:

input[type="text"] {
    border:2px solid red;
}
1 Like

Hey thanks! I figured out why the border wasn’t showing. It was because the border-style wasn’t set to solid.

1 Like

The problem now is that I cannot change the font color of the text within the text boxes.

I am using Google Chrome.

If I type color:red into the same input rule that I used above, Firefox and Chrome show the color assignment. However, where Firefox shows the color assignment to the placeholder text, too, Chrome does not. Forms have been around since browsers were created and still there are differences in how they behave. The color seems to be a browser specific thing.

Yeah, I think you are trying to target the PLACEHOLDER TEXT, which doesn’t have standard CSS support. But this should help:

#awf_field-90534028,
#awf_field-90534029 {
    display: block; 
    width: 98%;
    max-width: 28.125em;
    text-align: left;
    /*changes margin spacing, boder width, roundness of corners , padding ,and color of user text*/
    margin: 8px auto ;
    border-width: 2px ;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
     border-radius:8px;
     padding: 6px;
     color:red;
     
 }
/*styles for PLACE HOLDER TEXT*/
.af-textWrap input.text::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
.af-textWrap input.text::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
.af-textWrap input.text:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
.af-textWrap input.text:-moz-placeholder { /* Firefox 18- */
  color: pink;
}
#awf_field-90534028,
#awf_field-90534029 {
    display: block; 
    width: 98%;
    max-width: 28.125em;
    text-align: left;
    /*changes margin spacing, boder width, roundness of corners , padding ,and color of user text*/
    margin: 8px auto ;
    border-width: 2px ;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
     border-radius:8px;
     padding: 6px;
     color:red;
     
 }
/*styles for PLACE HOLDER TEXT*?
.af-textWrap input.text::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
.af-textWrap input.text::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
.af-textWrap input.text:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
.af-textWrap input.text:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

BTW, unless absolutely necessary , I would avoid targeting elements in the CSS via IDs. It will paint you into a corner specificity wise.

2 Likes

Thanks. I also seemed to have found that here: http://stackoverflow.com/questions/9451902/changing-an-inputs-html5-placeholder-color-with-css-does-not-work-on-chrome

NOTE: This should work in Chrome, et all. you have to keep all the place holder statement in SEPARATE declarations or they won’t work. This is because none of those rules are standard CSS selectors. When a browser encounters an unstandard selector it ignores the entire set.

2 Likes

Ok, well, it seems to be working perfectly now! :smile::beer:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.