样式输入元素CSS [英] Style Input elements CSS

问题描述

我正在尝试对如下图所示的输入文字和按钮进行样式设置：

I am trying to styling an input text and button like below image :

我绑了像此。

输出与图片不同。因为我是CSS的新手。

请帮我更正我的代码。

I've tied like this .
The output is not same as picture. as I'm new to CSS.
Would you please help me to correct my code?

推荐答案

您可以使用 border-radius 和 box-shadow 结合图片中的效果

You can use a combination of border-radius and box-shadow for the effect in the picture

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

这篇关于样式输入元素CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！