Place the legend outside the fieldset border - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Border Style

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Border Style

Description

Place the legend outside the fieldset border

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

body {<!--from w ww .  j a  v  a 2  s .co  m-->
   background-color: #996600;
   color: black;
}
form { margin-top:30px; }
fieldset {
   border: 10px solid #ffffff;
   border-radius: 10px;
   background-color: #999900;
   box-shadow: 10px 10px 5px pink;
   position: absolute;
}
legend {
   font-size: 20px;
   text-align: left;
   position:absolute;
   top:-38px;
}
input[type=text] {
   border: 2px solid black;
   border-radius: 10px;
   background-color: #cccc80;
}
input[type=button] {
   background-color: #996600;
   border: 2px solid black;
   border-radius: 5px;
   color: #c9ae78;
   font-weight: bolder;
}
p {
   font-size: 12px;
   font-style: italic;
}


      </style> 
 </head> 
 <body> 
  <form method="post" id="contactForm" action="#"> 
   <fieldset> 
    <legend>Newsletter Signup</legend> 
    <p>Test this is a test. Test this is a test. Test this is a test. Test this is a test. Test this is a test. Test this is a test. 
    Test this is a test. Test this is a test. Test this is a test. Test this is a test. Test this is a test. 
    Test this is a test. Test this is a test. Test this is a test. Test this is a test. Test this is a test. 
    Test this is a test. Test this is a test. Test this is a test. Test this is a test. Test this is a test. 
    Test this is a test. Test this is a test. Test this is a test. Test this is a test. </p> 
    <label for="email" id="emailLabel">Email</label> 
    <input type="text" id="email"> 
    <input type="button" name="submit" value="Submit" id="submitButton"> 
   </fieldset> 
  </form>  
 </body>
</html>

Related Tutorials