All geek questions in one place

CSS Input Elements Style

I am trying to style the input text and button as shown below:

enter image description here


I attached like this .
The output is not the same as the image. since I'm new to CSS.
Could you help me fix my code?

+6
source share
2 answers

You can use a combination of border-radius and box-shadow to effect the picture.

jsfiddle example

 body {background-color:#636363;} input[type=text] { background-color: #BFBDBD; border:solid 1px #BFBDBD; color: #979797; height: 28px; padding-left:10px; width: 191px; box-shadow: 2px 2px 0 #828181 inset; } input[type=button] { background-color: #1E1E1E; color: #979797; height: 24px; width: 103px; color: #bbbbbb; text-transform:uppercase; box-shadow:-1px 2px #6E6B6A inset; } input[type=button], input[type=text] { border: 0; border-radius:5px; font-family: Sansation,Arial; }
+17
source

You have a legal error in the last selector: inpur instead of input .

Also, you don't have a class named input, you are actually targeting the elements themselves. Change .input to input

To get the effect of rounded corners, add a border radius. Your latest CSS declaration should look like above.

 input[type=button], input[type=text] { border-radius: 5px; font-family: Sansation; }
+6
source

Source: https://habr.com/ru/post/895257/

More articles:


All Articles