html中圆角搜索框怎么做


当前第2页 返回上一页

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

 

<style>

    input[type=text] {

        color: #111;

        background-color: #c7dec6;

        border-top-left-radius: 10px;

        border-top-right-radius: 10px;

        border-bottom-left-radius: 10px;

        border-bottom-right-radius: 10px;

        padding:20px;

    }

</style>

</head>

 

<body>

<form action="http://www.baidu.com/baidu" target="_blank">

    <input type="text" name="word" size="60"

    style="height: 30px;width: 1100px;background-color: #9a9a9a26;">

    <input type="submit" value="搜索"

    style="border-top-left-radius: 10px;

border-top-right-radius: 10px;

border-bottom-left-radius: 10px;

border-bottom-right-radius: 10px;

padding:20px;

height: 60px;width: 80px;

margin-left: 30px;

background-color: #1591ea;

font-size: large;

color: antiquewhite;">

</form>

</body>

 

</html>

运行效果如下:

bdb1a33197aef234de8f502134839ee.png

【推荐:css视频教程】

以上就是html中圆角搜索框怎么做的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

Html img标签的绝对路径怎么写?Html img标签绝对路径的使用方法

Html的<abbr>标签

Html你一定要知道的优化技巧

Html元素中设置css样式的方式是什么

Html ins标签怎么用

Html css怎么设置字体大小

Html的select对象如何进行option对象的操作

Html中如何加下划线?Html<u>标签添加下划线的用法实例

Html如何使用不换行标签

浅谈Html标题,段落,换行,水平线,特殊字符

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...