Fatal编程技术网
  • html/
  • 尝试在输入字段周围创建html框，并使其变得美观

尝试在输入字段周围创建html框，并使其变得美观

html css angularjs

尝试在输入字段周围创建html框，并使其变得美观,html,css,angularjs,Html,Css,Angularjs,我有一大堆领域，我正试图使周围的边界。我在我的标签周围玩了一些样式和位置标签，但它没有做我想要的标签似乎使事情变得复杂 我在哪里或者怎样才能使它成为这9个字段周围的黑色边框？我也使用了一些角度，任何让它看起来“更专业”的技巧都会很好。我在这个新地方实习，我想交一份非常好的工作 <!DOCTYPE html> <html> <head> <style> p { width: 960px;

我有一大堆领域，我正试图使周围的边界。我在我的
标签周围玩了一些样式和位置
标签，但它没有做我想要的<代码>标签似乎使事情变得复杂

我在哪里或者怎样才能使它成为这9个字段周围的黑色边框？我也使用了一些角度，任何让它看起来“更专业”的技巧都会很好。我在这个新地方实习，我想交一份非常好的工作

<!DOCTYPE html>
<html>
    <head>
        <style>
        p {
            width: 960px;
            border:1px solid black;
            margin: auto;
            padding: 10px;
            background: #ffffff

        }

    </style>
        <form class="form " role="form" >
            <div class="row ">
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                        <div class="form-group">
                            <label>Ship To #</label>
                            <input type="text" class="form-control" ng-  model="shipToNumber" />
                        </div>
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                        <div class="form-group">
                            <label>Ship To Mnemonic</label>
                            <input type="text" class="form-control" ng-model="shipToMnemonic" />
                        </div>
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                        <div class="form-group">
                            <label>Ship To Name</label>
                            <input type="text" class="form-control" ng-model="shipToName" />
                        </div>
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                        <div class="form-group">
                            <label>Customer Order #</label>
                            <input type="text" class="form-control" ng-model="customerOrderNumber" />
                        </div>
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                        <div class="form-group">
                            <label>Load #</label>
                            <input type="text" class="form-control" ng-model="loadNumber" />
                        </div>
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                        <div class="form-group">
                            <label>Car Initials</label>
                            <input type="text" class="form-control" ng-model="carInitials" />
                        </div>
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                        <div class="form-group">
                            <label>Car #</label>
                            <input type="text" class="form-control" ng-model="carNumber" />
                        </div>
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                        <div class="form-group">
                            <label>Waybill #</label>
                            <input type="text" class="form-control" ng-model="waybill" />
                        </div>
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                        <div class="form-group">
                            <label>Carrier Name</label>
                            <input type="text" class="form-control" ng-model="carrierName" />
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </head>
</html>


p{
宽度：960px；
边框：1px纯黑；
保证金：自动；
填充：10px；
背景：#ffffff
}
运送到#
船到助记符
船名
客户订单#
装载#
汽车首字母
汽车#
运单#
承运人名称
为
.formgroup
元素设置样式，或使用HTML

Div标记非常有用。我必须同意，一开始，我们会浪费一些时间来试图弄清楚它们：）

您可以使包含列的div与表单组相同，并添加自己的新自定义类

在你的情况下，我会这样做：

html

<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
    <div class="form-group myapp-nice-border col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
        <label>Ship To #</label>
        <input type="text" class="form-control" ng-  model="shipToNumber" />
    </div>
</div>
请尝试一下，如果我理解错误，请告诉我：（

您必须仅以文本字段作为输入的目标，因此我建议这样做：

form input:not([type=submit]){
background-color: transparent !important;
color:white;
font-family: "Ek Mukta", sans-serif;
border: none;
border-radius: 0 !important;
box-shadow: none !important;
border-bottom: 2px solid white;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;

}
重要的！参数有时用于覆盖引导strongs属性。

请发布一个JSFIDLE。请查看..您可以使用标记
创建边框-
。表单{border:1px solid 35; dbdb；}
我不能像这样硬编码？好的，我也会给它一个机会看看它的功能，为了获得洞察力，在不破坏这个项目中任何其他内容的情况下，我可以单独制作一个.form-group2{}？当然可以。您可以创建任意数量的自定义类。只需将该类添加到元素中，并根据您的喜好设置该类的样式。它只会影响类
。form-group2
应用于的元素。：）因此标记将引用该类。form group方法对吗？a.form-group2会被调用吗？明白了！但是右边有这么大的空间，有没有办法使它在所有的边上都有相等的空间？当然。我建议阅读一些基本的CSS内容，比如
填充
，
边距
，
宽度
，和
高度
：）注：我不鼓励使用
！重要信息
，因为这会使CSS更难维护。更高的特异性选择器会更好。 
.myapp-nice-border {
    border: 1px solid black;
}

form input:not([type=submit]){
background-color: transparent !important;
color:white;
font-family: "Ek Mukta", sans-serif;
border: none;
border-radius: 0 !important;
box-shadow: none !important;
border-bottom: 2px solid white;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;

}