×
FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Tutorial Topics
X
softetechnologies
Easy Image gallery II by CSS 3.0 3 Column Responsive Layout using HTML and CSS
Different CSS3 Text Box styling - CSS 3.0
26418    Arnab De    15/05/2017

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
    softetechnologies
  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.
softetechnologies

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;
}

softetechnologies

.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

Easy Image gallery II by CSS 3.0 3 Column Responsive Layout using HTML and CSS
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.
Enter New Comment
Comment History
No Comment Found Yet.
Rabindranath Tagore
Don't limit a child to your own learning, for he was born in another time.
Rabindranath Tagore
25769
52.75
Today So Far
Total View (Lakh)
softetechnologies
26/05/2018     42031
01/01/2018     36003
28/06/2017     34089
25/06/2018     33447
02/08/2017     32401
01/08/2017     26864
06/07/2017     26791
15/05/2017     26418
14/07/2017     21855
21/04/2018     20717
softetechnologies