如何制作透明的搜索框

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        form { width: 1000px ; height: 600px; background-image: url("22.jpg"); background-position: -100px -200px; }        div { float: left; border: 1px solid black; background: lightgray; opacity: .5;}        input[type="text"] { border: none; margin-left: 5px; background: lightgray; opacity: .5; }        input[type="submit"] { border: none; background: none;  background-image:url("fangdajing_07.png"); width: 30px; height:30px;        background-repeat:no-repeat; background-position: 2px 2px;  }        input[value="登录"] { border:none; background: none; margin-top: 8px; margin-left: 10px; color: white;}        input[value="注册"] { border:none; background: none; margin-top: 8px; color: white;}        input[value="登录"]:hover { color: gray;}        input[value="注册"]:hover { color: gray;}    </style></head><body><form action="">    <div>        <input type="text" placeholder="请输入您想知道的内容"/>        <input type="submit" value="&nbsp;"/>    </div>    <input type="button" value="登录" />    <input type="button" value="注册" /></form></body></html>

时间： 2024-11-10 01:07:17

如何制作透明的搜索框的相关文章

bootstrap制作搜索框及添加回车搜索事件

下面是开发中用bootstrap制作的一个搜索框,以及给搜索框添加回车搜索事件的一个小案例. bootstrap制作搜索框及添加回车搜索事件下面是功能实现的代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>bootstrap制作搜索框及添加回车搜索事件</title> 6 7 <link rel="s

网页中制作搜索框中遇到一些小问题

当你在制作一个搜索框加按钮的时候,比如<input class="header-text"/><input type="button" class="header-button"/>这样放置,文本框和按钮不管你怎么调样式也不在同一个位置,这个时候解决方式有两种: 1.外边包一层div,让文本框和按钮float:left,此时文本框和按钮都会紧贴div,也就会出现在同一水平线上的效果 2.待搜索

Bootstrap3制作搜索框样式的方法

bootstrap3中的很多样式,都是需要我们进行摸索着学习的,在制作类似百度的素搜索框时,一开始会不知道怎么做,其实很简单,利用内联图标方式就可以实现 <div class="input-group"> <input type="text" class="form-control input-lg"><span class="input-group-addon btn btn-primary"&

搜索框制作

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">   <meta http-equiv="X-UA-Compatible" content="IE=edg

android 透明弹出搜索框

1.在QQ一些APP当中有是弹出一个半透明的搜索框的,其实这种效果就是很多种方法,自定义一个Dialog,或者直接将activity的背景变成半透明的也可以的. 下面就是将activity变成半透明的方法.效果图如下: 2.代码如下: 在styles.xml文件中添加自定义Theme 1 <style name="MyTranspaent"> 2 3 <item name="android:windowBackground">@color/t

Xamarin.Android 制作搜索框

前段时间仿QQ做了一个搜索框样式,个人认为还不错,留在这里给大家做个参考,希望能帮助到有需要的人. 首先上截图(图1:项目中的样式,图2:demo样式): 不多说直接上代码: Main.axml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" androi

WPF—QQ界面（三）：联系人搜索框和个性签名一栏的效果实现

由于过年回家,家里没网,好几个月没写了.昨晚刚回实验室,今天接着写. 首先分析搜索框和个性签名一栏的效果: 1.搜索框平常时框内有一行文字用来提示搜索的内容,当鼠标左键单击会使框内文字清空,并有光标闪烁: 2.个性签名一栏平常时也有一行文字,内容就是你的个性签名啦,当鼠标单击时,会使整个框的文字内容全选,此时可以随意更改你的个性签名. 3.两者还有一个共同特点:当鼠标移到搜索框和个性签名框,都会在鼠标的下方出现一行提示文字. 先贴搜索框的代码: 前台: <TextBox x:Name="t

做一个input搜索框

首先我先抛出制作这个搜索框的细节: 1)文本输入框要有内阴影. 2)文本框与按钮要对齐. 好,我们现在开始制作,先说一下,最直接的制作方法,文本输入框的内阴影我们可以用图片来做,用几像素的图片平铺,然后一个DIV层内包含input与button两个标签,大致HTML标签书写如: 1 2 3 4 5 6 <div id="search-field"> <form id="search-form"> <input type=&quo

淘宝购物车页面智能搜索框Ajax异步加载数据

如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区非常的活跃,许多朋友都在不同地方分享了很多优秀的插件.我在相关的网站上找过想实现类似功能的插件,但是没有找到.于是乎,自己动手丰衣足食.自己来搭建智能搜索框下拉列表.当然,如果有类似功能并且常维护Bug的插件,望留言交流. 源码地址: 淘宝购物车页面--PC端和移动端项目实战首先需要先给大家打一根