首页 网络技术
  1. 正文

怎么更改Bootstrap默认输入焦点发光样式

答案:使用CSSbox-shadow属性

默认情况下,在Bootstrap中获得焦点后,所有文本<input>元素<textarea>和<select>以及其类.form-control以蓝色突出显示的元素都会发光。

但是,您可以通过简单地设置CSSborder-color和box-shadow属性来修改此默认的焦点发光或阴影样式。让我们尝试一个示例,看看它实际上是如何工作的:

代码:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Override BootstrapInput Focus Styles</title>

<link rel="stylesheet" href="css/bootstrap.min.css">

<script src="js/jquery-3.5.1.min.js"></script>

<script src="js/bootstrap.min.js"></script>

<style>

    .form-control:focus {

        border-color: #ff80ff;

        box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(255, 100, 255, 0.5);

    }

</style>

</head>

<body>

    <form>

        <div class="form-group">

            <label>Name</label>

            <input type="text" class="form-control" placeholder="Full Name">

        </div>

        <div class="form-group">

            <label>Address</label>

            <textarea class="form-control" rows="4" placeholder="Mailing Address"></textarea>

        </div>

         <div class="form-group">

            <label>Country</label>

            <select class="form-control">

                <option>Select</option>

                <option>India</option>

                <option>USA</option>

                <option>UK</option>

            </select>

        </div>

        <div class="checkbox">

            <label><input type="checkbox"> Agree with Terms and Conditions</label>

        </div>

        <button type="submit" class="btn btn-primary">Send</button>

    </form>

</body>

</html>

本文标题:怎么更改Bootstrap默认输入焦点发光样式
本文链接:https://www.qqooo.cn/post/6956.html
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 xsds@vip.qq.com 处理,谢谢!