Bootstrap3基础 form-control 圆角的输入框,光标放入后边框变色

礼悟:
     公恒学思合行悟,尊师重道存感恩。叶见寻根三返一,江河湖海同一体。
          虚怀若谷良心主,愿行无悔给最苦。读书锻炼养身心,诚劝且行且珍惜。


               ide:visual studio 2017  
            browser:Firefox / Chrome
     bootstrap:3.3.7

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!-- 页面的宽度与设备屏幕的宽度一致 -->
	<meta name="viewport" content="width=device-width">
	<!-- 初始缩放比例 1:1,没有横线滚动的效果 -->
	<meta name="viewport" content="initial-scale=1">
	<!-- 禁止用户缩放 -->
	<meta name="viewport" content="user-scalable=no">

    <!-- 引入外部bootstrap的css文件(压缩版) -->
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
	<!-- NO.1 先引入jQuery文件(压缩版) -->
	<script src="bootstrap/js/jquery.min.js"></script>
	<!-- NO.2 再引入js文件(压缩版) -->
	<script src="bootstrap/js/bootstrap.min.js"></script>

</head>
<body>
    <div class="container">
        <!--
            label标签的介绍
            http://www.w3school.com.cn/tags/tag_label.asp
            转自上面的网址:label的for属性可以把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。
            form-control:圆角的输入框,光标放入后 框的四边还会变色
            -->
       <form>
           <label for="username">用户名</label>
           <input type="text" name="username" id="username" class="form-control"/>
       </form>
    </div>
</body>
</html>

效果



Bootstrap,优秀的前端开源框架,值得学习。
学习资源:v3.bootcss.com + itcast和itheima视频库 + 清净的心地。如果您有公开的资源,可以分享给我的话,用您的资源学习也可以。
博文是观看视频后,融入思考写成的。博文好,是老师讲得好。博文坏,是 给最苦 没认真。

原文地址:https://www.cnblogs.com/jizuiku/p/8282510.html

时间: 2024-10-02 20:13:34

Bootstrap3基础 form-control 圆角的输入框,光标放入后边框变色的相关文章

HTML页面表单输入框去掉鼠标选中后边框变色的效果

标题说的有些含糊,实在不知道怎么描述了,就简单说一下吧,一个最简单的表单,代码如下,没有任何样式和名字, 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>文本框鼠标点中时边框不变色</title> 6 </head> 7 <body> 8 <input type="text"

Overview of Form Control Types [AX 2012]

Overview of Form Control Types [AX 2012] Other Versions 0 out of 1 rated this helpful - Rate this topic Updated: October 11, 2011 Applies To: Microsoft Dynamics AX 2012 R3, Microsoft Dynamics AX 2012 R2, Microsoft Dynamics AX 2012 Feature Pack, Micro

C#中使用SelectionStart属性指定输入框光标位置

今天工作中遇到一个小BUG需要修改,需求为在文本框输入的过程中,如果数字是以0开头则自动消除0 如输入012,则显示12 很容易想到在textbox的text changed事件中判断,如果text是startwith 0,那么TrimStart('0') 但实际调试时发现,0是是去掉了,但光标会保留在最前面,那么用户依次输入012三个数字,界面会显示为21 查看资料后发现c#中控件属性SelectionStart可以指定光标位置,那么只需要在处理TrimStart('0')后加一句 textB

ERROR Error: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as &#39;standalone&#39; in ngModelOptions.

AbpCore 前端使用Ng-Zorro 日期控件nz-range-picker时属性[ngModel]和事件(ngModelChange)都不起作用 控件代码 <nz-range-picker [nzFormat]="shedateFormat" [ngModel]="searchAreasDate" (ngModelChange)="changeTime($event)"></nz-range-picker> 并且脚本

css布局-改变输入框光标颜色caret-color: blue;

改变输入框光标颜色效果: label { display: block; padding-bottom: 5px; font-weight: bold; font-size: 16px; } input { display: block; padding: 0 20px; outline: none; border: 1px solid #ccc; width: 100%; height: 40px; caret-color: blue; transition: all 300ms; } <di

An invalid form control with name=&#39;pki_file&#39; is not focusable.

<div id="uploadFileSel" class="form-group"> <label class="control-label" id="imp_con_file_title"></label> <input id="uploadMultFile"class="form-control" type="file"

Android基础入门教程——7.5.3 Android 4.4后WebView的一些注意事项

Android基础入门教程--7.5.3 Android 4.4后WebView的一些注意事项 标签(空格分隔): Android基础入门教程 本节引言: 本节参考原文:Android 4.4 中 WebView 使用注意事项.md 从Android 4.4开始,Android中的WebView不再是基于WebKit的,而是开始基于Chromium,这个改变 使得WebView的性能大幅提升,并且对HTML5,CSS,JavaScript有了更好的支持! 虽然chromium完全取代了以前的We

没有任何编程基础可以直接学习python语言吗?学会后能够做什么?

很明确的说 python非常适合没有任何编程基础的人入门.. 目前应用最多的:全栈开发.数据分析.运维开发,今天我们就以这三个重点的岗位来做一下自学Python的规划,希望你在学之前就能有结果的来走得更远. 很多人在问,python学了之后能做些什么? 既然你没有碰过 Python ,不知编程为何物的人,我就不提编程里面的项目名了--创一个小群,供大家学习交流聊天如果有对学python方面有什么疑惑问题的,或者有什么想说的想聊的大家可以一起交流学习一起进步呀.也希望大家对学python能够持之以

Bootstrap3基础 img-rounded 给图片加圆角的边框

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Firefox / Chrome   bootstrap:3.3.7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu