web界面文本框内部加按钮

浏览网页时，界面经常可以见到这样的搜索框设计：

看着就像一个文本框内嵌套了一个按钮，想着是不是有哪个方式能够直接实现这种组件的方式，但是找了找在实际的web里边并没有标办法直接实现这种界面样式。找了很多的博客和资料，了解到这种设计方式实际是将一个文本框和一个按钮组合在一起，取消掉文本框和按钮的边框样式，用css重定义div标签，画出来一个边框，将文本框和按钮放进去，添加一个背景图即可。

废话不多，代码如下：

<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<style type="text/css">
/*用css重定义div标签*/
.div1 {/*添加背景图*/background-image: url(images/24.png);/*定义画的格子大小*/width: 200px;height: 27px;text-align: left;border: 1px solid #458591;
}
</style>
</head>
<body><div class="div1"><!--在div标签内定义一个文本框和一个按钮，并为按钮添加一个背景图片--><input type="text"style='border-left: 0px; border-top: 0px; border-right: 0px; border-bottom: 1px; height: 25px;'><button type="button" value=" "style="width: 30px; height: 27px; border: 1; background: none; border: none; float: right;background-image:url(images/10.png)"></button></div>
</body>
</html>

按钮背景图10.png：

整个输入框背景图24.png（或者根据自己需要的大小自己用ps生成，这个好像有点白了，可能看不清…）：

效果图：

web界面文本框内部加按钮相关推荐

html文本框后面加一个按钮怎么对齐,怎样对齐文本框和图像(image)按钮实现三点一线...
一个文本框旁边一个按钮是很经常用到的网页内容,比如搜索框等等,而如果旁边的按钮使用图像的话,他们竖直方向就很不容易对齐,即使使用 vertical-align.padding和margin等都不行(特 ...
Java图形window界面创建一个文本框和一个按钮awt容器
package com.java;import java.awt.*;public class HelloWorld {public static void main(String[] args) { ...
java用按钮控制文本框隐藏与显示_编写JAVA程序，在其中有一个按钮和一个文本框。单击按钮时，文本框中显示按钮上显示的字。...
展开全部一e68a8462616964757a686964616f31333363373766 主要实现技术 Java图形化界面,较为常见的有awt, swing 和swt, 一般使用SWING来 ...
css搜索的文本框,一个很不错的CSS改写的大表单文本框和搜索按钮组
<一个很不错的CSS改写的大表单文本框和搜索按钮组>要点: 本文介绍了一个很不错的CSS改写的大表单文本框和搜索按钮组,希望对您有用.如果有疑问,可以联系我们. 先看效果图: 开始爬取 C ...
python作业.创建两个文本框，一个按钮。第 1 个文本框绑定任意键事件，敲击键盘任意可显示字符，在交互窗口中显示该字符；第 2 个文本框绑定＜a＞键事件，敲击键盘 a 字符，在交互窗口中显示 10
""" 创建两个文本框,一个按钮. 第 1 个文本框绑定任意键事件,敲击键盘任意可显示字符,在交互窗口中显示该字符: 第 2 个文本框绑定<a>键事件,敲击键 ...
创建两个文本框，一个按钮。第 1 个文本框绑定任意键事件，敲击键盘任意可显示字符，在交互窗口中显示该字符；
创建两个文本框,一个按钮.第 1 个文本框绑定任意键事件,敲击键盘任意可显示字符,在交互窗口中显示该字符:第 2 个文本框绑定键事件,敲击键盘 a 字符,在交互窗口中显示 10 个'a'字符:按钮绑定 ...
android文本框左右加减按钮长按一直加减
为什么80%的码农都做不了架构师?>>> 来说说今天的战绩吧,说是战绩,是因为今天写代码时效率挺高,可能是因为集中精力吧,所以,如果要写好程序的话,最好满足以下两点: 1.写 ...
tkinter模块高级操作（一）—— 透明按钮、透明文本框、自定义按钮及自定义文本框
[写在前面] -- 众所周知,tkinter模块中自带的Button类是无法做到使其透明的(至少我无法做到) [tip:透明是指让背景颜色或图片穿过按钮而显示出来] -- 找遍了Button类的所有参 ...
html 文本框数量加减,收藏！js实现input加减
好的程序员是会复制粘贴的,这样说好像会被唾弃的..... html 减号按钮点击事件 function subtraction(){ //获取-号按钮 var subtraction = docume ...

web界面文本框内部加按钮

web界面文本框内部加按钮相关推荐

最新文章

热门文章