elementi di input di stile CSS

Question

sto cercando di styling un testo di input e pulsante mi piace qui sotto immagine:

ho legato come this.
L'output non è uguale all'immagine. come sono nuovo ai CSS.
La prego di aiutarmi a correggere il mio codice?

Answer 1

È possibile utilizzare una combinazione di border-radius e box-shadow per l'effetto nella foto

example jsfiddle

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

Answer 2

Hai un errore di ortografia nel tuo ultimo selettore dice inpur anziché input.

Inoltre, non hai una classe chiamata input, in realtà stai prendendo di mira gli elementi stessi. Modifica .input a input

Per ottenere l'effetto angoli arrotondati, aggiungere un raggio di bordo. La tua ultima dichiarazione CSS dovrebbe essere simile a questo con le modifiche di cui sopra

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