{"id":2649,"date":"2020-03-13T21:04:57","date_gmt":"2020-03-13T20:04:57","guid":{"rendered":"https:\/\/da-software.de\/?p=2649"},"modified":"2020-03-13T21:04:57","modified_gmt":"2020-03-13T20:04:57","slug":"adjust-form-fields-border-or-frame-with-css","status":"publish","type":"post","link":"https:\/\/da-software.net\/en\/2020\/03\/adjust-form-fields-border-or-frame-with-css\/","title":{"rendered":"Adjust form fields border or frame with CSS"},"content":{"rendered":"

For HTML or web forms, different HTML form fields are used by default, such as input<\/strong><\/em>, textareas<\/strong><\/em>. These are displayed by the different browsers by default with a small frame, unless you have included a CSS library<\/a> which already adopts these formatting.<\/p>\n

HTML form field adjust frame width<\/h3>\n

If you want to change this frame, you can use the appropriate CSS<\/abbr> statement. To do this, insert the following CSS code between the head<\/strong> tags and the style<\/strong> tags of the HTML file:<\/p>\n

input, textarea {\r\n    border-width:5px;\r\n}<\/code><\/pre>\n
This causes a frame of 5px width to be displayed around the input fields. Also the display of rounded corners<\/a> is possible. But you can also do this directly on the input<\/em>– and texttarea<\/em> tags in HMTL code. While the procedure described above applies to all form fields in the respective HTML file, you can use the following procedure to define the frame width individually for each form field.<\/p>\n
<input name=\"Name\" style=\"border-width:5px;\" \/>\r\n<textarea name=\"notes\" style=\"border-width:5px;\"><\/textarea><\/code><\/pre>\n
Or you build a small CSS class that defines the frame width and then assign the class to the respective form field. In the code it looks like this:<\/p>\n
.myborders {\r\n    border-width:5px;\r\n}<\/code><\/pre>\n
<input class=\"myborders\" name=\"Name\" \/>\r\n<textarea class=\"myborders\" name=\"notes\"><\/textarea><\/code><\/pre>\n
The following two pictures show a comparison of an input field with a frame and without a border. If you had chosen a white background in this case, the input field would not be directly visible in the browser.<\/p>\n
 <\/p>\n
\"Screenshot
Example of a web form with form fields with border width setting<\/figcaption><\/figure>\n
\"Screenshot
Example of a web form with form fields with default border width setting<\/figcaption><\/figure>\n
 <\/p>\n
Instead of the property border-width<\/strong> you can also use border<\/strong>. border-width<\/em> refers directly to the width, while the border<\/em> property is more general. Behind border<\/em> you can specify other properties, such as whether the border should be dashed or dotted.<\/p>\n
HTML form field Remove frame width<\/h3>\n
If you want to completely remove the border or frame from the form fields; well, then it’s quite simple. You use the above code and set the property border-width:0<\/em><\/strong> or throw this CSS property directly out.<\/p>\n
change border-width of form fields with editors<\/h3>\n
If you don’t want to bother with HTML and CSS, you can use an appropriate editor like the DA-FormMaker<\/a> to adjust the frame width.<\/p>\n
\"Screenshot:<\/a>
DA-FormMaker setting for border width in the online application form<\/figcaption><\/figure>","protected":false},"excerpt":{"rendered":"
This article explains how to customize the margins and borders of form fields to give them a unique design.<\/p>\n","protected":false},"author":2,"featured_media":667,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[20],"tags":[173,172,175,111,125,114,127],"class_list":["post-2649","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tips-and-tricks","tag-border-en","tag-css-en","tag-form-field","tag-internet-form","tag-online-form","tag-tutorial-en","tag-website-form"],"_links":{"self":[{"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/posts\/2649","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/comments?post=2649"}],"version-history":[{"count":0,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/posts\/2649\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/media\/667"}],"wp:attachment":[{"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/media?parent=2649"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/categories?post=2649"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/tags?post=2649"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}