Different CSS3 Text Box styling
15-05-2017    3109 times
CSS3 Text Box

Text Box Styling in CSS

Text box is a very important useful control in html. It is very simple in look. But we can style it in various ways using CSS3 text box. We can style the different part of the text box. That is, we can change the border, outline, margin, background color , fore color, padding, font, shadow, width, height, active.

  1. Border
    1. Border-style : Set the style of the border
    2. Border-width : Set the width of the border
    3. Border-color : Set the color of the border
    4. Border-radius : Set the corner radius of the border
    Tutorial at home
  2. Background
    1. Background-color : Set the background color of the text box.
    2. Background-image : Set the background image
    3. Background-position : Set the background position
    4. Background-repeat : Set how the background repeat
  3. Font
    1. Font-size : Set the font size
    2. Font-weight : Set the font weight
    3. Font-family : Set the font family
  4. Shadow
    1. Box-shadow : Set the shadow of the text box.
  5. Hover
    1. Set what happened when the mouse move over the text box.
  6. Focus
    1. Set what happened when the text box is focus or active.
  7. Width
    1. Width : Set the width of the text box.
Tutorial at home

Make a container with header

@charset "utf-8";

.full
{
width:80%;
position:relative;
left: 10%;
padding: 10px;
margin-top: 30px;
margin-bottom: 30px;
box-sizing: border-box;
font-size: 18px;
font-weight: bold;
color: #3852A1;
}

.container
{
width: 60%;
background-color: #fff;
border-style: solid;
border-width: 1px;
border-color: #000;
position: relative;
left: 20%;
}

.container header
{
width: 100%;
text-align: center;
font-size:28px;
background-color: #000;
color: #fff;
font-weight: bolder;
box-sizing: border-box;
}

Textbox class Style1


.style1
{
border-style: solid;
border-width: 1px;
border-color: #000;
border-radius: 50px;
}

Textbox Style 1
Textbox Style 1

Textbox class Style2


.style2
{
border: none;
border-bottom-style: solid;
border-bottom-width: 3px;
border-color: #f00;
}

Tutorial at home
Tutorial at home

.style2:focus
{
background-color: #F7E4E4;
}

Textbox Style 2
Textbox Style 2

Textbox class Style 3

.style3
{
background-image: url("u.png");
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 35px;
border-style: solid;
border-width: 1px;
border-color: #000;
border-radius: 5px;
box-shadow: 10px 10px 10px rgba ( 136 , 136 , 136 , 0.3 );
}

Textbox Style 3
Textbox Style 3

Video Tutorials

softetechnologies
    Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
    Related Post
  Query About the post