This question already has answers here:
How to remove the border highlight on an input text element
(21 answers)
How to remove focus border (outline) around text/input boxes? (Chrome) [duplicate]
(11 answers)
Closed 6 years ago.
I've a text area in my html, and this has rounded edges. but when I click inside the text area, it is showing a rectangle around the rounded edges.
Below is my HTML.
<textarea placeholder="Enter Text Here..." id="usermsg" class="Textareausermsg" onclick="TextAreaToggle()" style="margin: 0px 0px 0px -50px; width: 490px; height: 41px;"></textarea>
and here is my CSS
.Textareausermsg {
border-radius: 15px;
font-size: 15px;
text-align: left;
line-height: 34px;
}
working fiddle https://jsfiddle.net/jrss9192/1/
Just remove the outline
.Textareausermsg {
border-radius: 15px;
font-size: 15px;
text-align: left;
line-height: 34px;
outline: 0;
}
The rectangle that you are seeing is a browser-default outline. While its not a good idea to remove browser default styles, it can be done by declaring outline: none;
.Textareausermsg {
border-radius: 15px;
font-size: 15px;
text-align: left;
line-height: 34px;
outline: none;
}
<textarea placeholder="Enter Text Here..." id="usermsg" class="Textareausermsg" style="margin: 0px 0px 0px -50px; width: 490px; height: 41px;"></textarea>
Use: outline: none when the textarea is focused
textarea:focus{
outline: none;
}
That's outline of textarea appears on focus just set outline:0; on .Textareausermsg
.Textareausermsg {
border-radius: 15px;
font-size: 15px;
text-align: left;
line-height: 34px;
outline:0;
}
<textarea placeholder="Enter Text Here..." id="usermsg" class="Textareausermsg" style="width: 260px; height: 41px;"></textarea>
The rectangled area is called "outline" and it's a css property.
Try add outline: none; in your css code to remove it.
If you want a "blue border" when you click / focus the element, try this
.Textareausermsg {
border-radius: 15px;
font-size: 15px;
text-align: left;
line-height: 34px;
outline: none;
}
.Textareausermsg:focus, .Textareausermsg:active {
border:1px solid blue;
}
https://jsfiddle.net/jrss9192/2/
Here is the solution to your question.
.Textareausermsg {
border-radius: 15px;
font-size: 15px;
text-align: left;
line-height: 34px;
outline: none;
}
.Textareausermsg :active , .Textareausermsg :focus { outline:none}
Related
Ok so I got the following:
What I want to do is to make the button which says "Elegir archivos" to be orange like the button that says "Finalizar" and make the text the file-input produces grey like the text which says "Formatos aceptados".
Here's what I tried:
<tr>
<td class="upload-pic"><input class="file-submit" type="file" name="fileUpload" size="50" multiple="multiple"/></td>
</tr>
CSS:
.file-submit {
height: 35px !important;
width: 300px !important;
padding: 5px !important;
font-size: 15px !important;
margin-right: 10px !important;
margin-top: 10px !important;
margin-bottom: 20px !important;
background-color:red;
}
input[type="file"] {
width: 80%;
color: white;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
background-color: #FD8907;
margin-left: 10px;
float: right;
}
What I want: The button which says "Elegir archivos" has to be orange with its text in white. The text next to it which says "No se eligio archivo" has to be grey with the white background. For some reason everything ends up in a big orange box and the button still looks like the default one.
In order to achieve that, you can wrap the input button with "label", so that label becomes clickable. Then make your input button opacity 0 (transparent).
$('.file-submit').on('change', function(){
$(this).closest('.btn-wrapper').find('span')
.text('FOTOS Formatos aceptados: JPG');
})
.btn-wrapper {
font-family: 'Veranda', sans-serif;
}
.btn-file {
padding: 8px 15px;
background-color: #fd8907;
border-radius: 3px;
color: #fff;
margin-right: 8px;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}
.btn-file span {
display: block;
color: #777;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>
<div class="btn-wrapper">
<label class="btn-file">
Elegir archivos
<input type="file" class="file-submit" name="fileUpload" accept=".jpg" multiple="multiple">
</label>
<span>No se eligio archivo</span>
</div>
</td>
But if you want to change the text after file is selected, you will need some help with javascript or jQuery.
Basically what the problem is, that the browser doesn't know that you want it to be orange. Because your file says that it is a button, it is applying the default HTML button style to it. To clear this, in the CSS, all you have to say is:
tr td input.file-submit {
text-decoration: none;
color: #ffffff;
}
Then, just change the color of the text to #848D95.
There you go. Done.
Hope this helps!!!
Please have a view at this image:
As from the image you can see that I have entered text in the input box but as I also have a button placed in that box so the text is getting hidden below the box.
Is there any way to prevent that, the button should also be on that place and the text should not hide instead it shoud be focused if further text is being typed.
Html code is:
<div class="form">
<input type="text" placeholder="Subscribe & Get Notified" id="email_inp">
<button style="outline: none;" class="btn-1 span btn-4 btn-4a icon-arrow-right" id="email_btn"><span></span></button>
</div>
The css code is:
#media only screen and (max-width: 768px)
{
input[type="text"]
{
font-family: "titillium_webregular", Arial, sans-serif;
border: none;
-webkit-border-radius: 3px 33px 33px 3px;
border-radius: 10px 33px 33px 10px;
color: rgba(85, 85, 85, 0.85);
font-size: 1.1em;
display: inline;
padding: 19.7px 13px;
background: #f5f5f5;
outline: none;
width: 93%;
box-shadow: 0px 11px 34px #111;
vertical-align: middle;
}
.btn-1
{
cursor: pointer;
padding: 29px 29px;
display: inline-block;
position: relative;
vertical-align: middle;
margin-left: -67px;
text-indent: -9999px;
margin-top: 1px;
outline: none;
width: 20px;
height: 14px;
border:none;
}
}
Any helps appreciated. Thanks in advance.
Try this.. You can see a space right to the textbox. I have added padding right to the textbox
$(function(){
$('#tbcss').val('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa');
});
#tbcss
{
padding-right: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="text" id="tbcss"/>
In my opinion, you should use your styling in a bit different way and use .form CSS selector too. You can use flexbox for example:
.form {
// NEW:
display: flex;
justify-content: space-between;
// Your old input CSS:
-webkit-border-radius: 3px 33px 33px 3px;
border-radius: 10px 33px 33px 10px;
background: #f5f5f5;
box-shadow: 0px 11px 34px #111;
width: 93%;
}
input[type="text"] {
// NEW:
width: 100%;
// Your old without unnecessary CSS:
font-family: "titillium_webregular", Arial, sans-serif;
color: rgba(85, 85, 85, 0.85);
border: none;
font-size: 1.1em;
padding: 19.7px 13px;
outline: none;
vertical-align: middle;
}
.btn-1 {
// NEW
align-self: flex-end;
// Your old without unnecessary CSS:
cursor: pointer;
padding: 29px 29px;
text-indent: -9999px;
margin-top: 1px;
outline: none;
width: 20px;
height: 14px;
border:none;
}
Add webkit CSS properties in case you need support in older browsers.
If you wish to prevent the image from hiding the text, then all you need to do is increase the padding-right property on the input textfield.
Maybe try a value of 40px or even more until you're satisfied with the result, then the caret should never go below the button.
Just add this:
input[type="text"]
{
padding-right:5%;
}
In this case all u need to do is add "padding-right: 50 px;" to the input text box class(50 is just a number u can increase or decrease that according to your need)
I am using below mentions css to show cutom radio buttons
input[type=radio]{
display:none;
}
.radio-options label::before {
content: "\2b24";
color:#e2e2e2;
display: inline-block !important;
width: 17px;
height: 17px;
vertical-align:middle;
margin-right: 8px;
background-color: #fff;
border: 1px solid #e2e2e2;
border-radius: 8px;
font-size: 9px;
text-align: center;
text-shadow: 0px 0px 3px #fff;
font-family: monospace;
padding-top: 1.8px;
line-height: 10px;
cursor: pointer;
}
.radio-options label.active-radio::before {
content: "\2b24";
color: #f9b410;
background-color: #fff;
font-size: 9px;
text-align: center;
text-shadow: 0px 0px 3px #fff;
font-family: monospace;
margin-left: 0px;
padding-top: 1.8px;
line-height: 10px;
}
<div class="radio-options">
<div class="col-md-6 col-xs-6">
<input id="some_thing" type="radio" >
<label ng-class="{'active-radio':true}">Something</label >
</div>
</div>
In desktop browser it's working correctly and showing radio button as
But in safari iOs its not displaying anything
Any suggestions what could be possible cause ?
It is because of the Unicode symbol you use as a content. It doesn't seem to appear on iOS. If you change to "Black Circle" instead it will work. (Just increase the font-size to compensate the size.)
Unicode Black Circle symbol
Similar issue
The button below is not aligning with the input.
The input has to be on the same height as the button, though the padding of the input seems to have a influence on the alignment! The difference between padding-top and padding-bottom creates this shift of the button.
I made a fiddle: http://jsfiddle.net/3RMhm/10/ to show what I mean.
CSS:
.button {
font-size: 15px;
padding: 9px 23px;
border:0;
}
.form {
width: 290px;
background-color: #F9F9F9;
font-size: 18px;
color: #333;
height: 25px;
border:1px solid darkgray;
padding-top: 15px; <--- This padding
padding-bottom: 0px; <--- And this padding
}
HTML:
<input name="name" class="form" />
<input class="button" type="submit">
Just add vertical-align: middle to both elements (button and input).
http://jsfiddle.net/3RMhm/3/
Use:
vertical-align:middle;
margin-top: -5px;
http://jsfiddle.net/Hive7/3RMhm/2/
In your .form class,just change padding-top and padding-bottom values to :
.form {
padding-right: 4px;
padding-bottom: 8px;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
The community is reviewing whether to reopen this question as of 3 days ago.
Improve this question
How do I visually place a button inside an input element as shown below?
The user should be able to interact with the input as normal. The text shouldn't go behind the button, even when it's long. Focus should work correctly. The form should be accessible and work correctly in screen readers. The whole component should be styleable with CSS, and should be able to easily resize to fit the space available.
How do I accomplish this with modern CSS?
The button isn't inside the input. Here:
input[type="text"] {
width: 200px;
height: 20px;
padding-right: 50px;
}
input[type="submit"] {
margin-left: -50px;
height: 20px;
width: 50px;
}
Example: http://jsfiddle.net/s5GVh/
Use a Flexbox, and put the border on the form.
The best way to do this now (2022) is with a flexbox.
Put the border on the containing element (in this case I've used the form, but you could use a div).
Use a flexbox layout to arrange the input and the button side by side. Allow the input to stretch to take up all available space.
Now hide the input by removing its border.
Run the snippet below to see what you get.
form {
/* This bit sets up the horizontal layout */
display:flex;
flex-direction:row;
/* This bit draws the box around it */
border:1px solid grey;
/* I've used padding so you can see the edges of the elements. */
padding:1px;
}
input {
/* Tell the input to use all the available space */
flex-grow:2;
/* And hide the input's outline, so the form looks like the outline */
border:none;
}
/* remove the input focus blue box, it will be in the wrong place. */
input:focus {
outline: none;
}
/* Add the focus effect to the form so it contains the button */
form:focus-within {
outline: 1px solid blue
}
button {
/* Just a little styling to make it pretty */
border:1px solid blue;
background:blue;
color:white;
}
<form>
<input />
<button>Go</button>
</form>
Why this is good
It will stretch to any width.
The button will always be just as big as it needs to be. It won't stretch if the screen is wide, or shrink if the screen is narrow.
The input text will not go behind the button.
Caveats and Browser Support
There's limited Flexbox support in IE9, so the button will not be on the right of the form. IE9 has not been supported by Microsoft for some years now, so I'm personally quite comfortable with this.
I've used minimal styling here. I've left in the padding to show the edges of things. You can obviously make this look however you want it to look with rounded corners, drop shadows, etc..
.flexContainer {
display: flex;
}
.inputField {
flex: 1;
}
<div class="flexContainer">
<input type="password" class="inputField">
<button type="submit"><img src="arrow.png" alt="Arrow Icon"></button>
</div>
I found a great code for you:
HTML
<form class="form-wrapper cf">
<input type="text" placeholder="Search here..." required>
<button type="submit">Search</button>
</form>
CSS
/*Clearing Floats*/
.cf:before, .cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
.cf {
zoom:1;
}
/* Form wrapper styling */
.form-wrapper {
width: 450px;
padding: 15px;
margin: 150px auto 50px auto;
background: #444;
background: rgba(0,0,0,.2);
border-radius: 10px;
box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}
/* Form text input */
.form-wrapper input {
width: 330px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #eee;
border-radius: 3px 0 0 3px;
}
.form-wrapper input:focus {
outline: 0;
background: #fff;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-moz-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
/* Form submit button */
.form-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 110px;
font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: #fff;
text-transform: uppercase;
background: #d83c3c;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}
.form-wrapper button:hover {
background: #e54040;
}
.form-wrapper button:active,
.form-wrapper button:focus {
background: #c42f2f;
outline: 0;
}
.form-wrapper button:before { /* left arrow */
content: '';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #d83c3c transparent;
top: 12px;
left: -6px;
}
.form-wrapper button:hover:before {
border-right-color: #e54040;
}
.form-wrapper button:focus:before,
.form-wrapper button:active:before {
border-right-color: #c42f2f;
}
.form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
border: 0;
padding: 0;
}
Demo: On fiddle
Source: Speckyboy
This is the cleanest way to do in bootstrap v3.
<div class="form-group">
<div class="input-group">
<input type="text" name="search" class="form-control" placeholder="Search">
<span><button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button></span>
</div>
</div>
This can be achieved using inline-block
JS fiddle here
<html>
<body class="body">
<div class="form">
<form class="email-form">
<input type="text" class="input">
Button
</form>
</div>
</body>
</html>
<style>
* {
box-sizing: border-box;
}
.body {
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333;
}
.form {
display: block;
margin: 0 0 15px;
}
.email-form {
display: block;
margin-top: 20px;
margin-left: 20px;
}
.button {
height: 40px;
display: inline-block;
padding: 9px 15px;
background-color: grey;
color: white;
border: 0;
line-height: inherit;
text-decoration: none;
cursor: pointer;
}
.input {
display: inline-block;
width: 200px;
height: 40px;
margin-bottom: 0px;
padding: 9px 12px;
color: #333333;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #cccccc;
margin: 0;
line-height: 1.42857143;
}
</style>