×
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
32541    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.
Albert Einstein
Education is not the learning of facts. It is rather the training of the mind to think
Albert Einstein
3412
71.03
Today So Far
Total View (Lakh)
softetechnologies
26/05/2018     51607
25/06/2018     43511
01/01/2018     42647
28/06/2017     40381
02/08/2017     39176
01/08/2017     33421
06/07/2017     33147
15/05/2017     32541
14/07/2017     28736
11/09/2018     28489
softetechnologies