Can I add margin inside textarea? - html

I was wondering if I could add some left margin inside textarea, I want there to be some space because I am using an image icon as my button and thats inside the textarea, when I type the words eventually cover the image.
<div id="inputBox">
<textarea class="txtarea" rows="50" name="Text" Id="Text"> </textarea>
<button mat-button id="send">
<mat-icon>send</mat-icon>
</button>
</div>

always search google first
Web development resource
.txtarea{
margin-left: 20px;
}

Related

Fixed height text input field, text on top

I have a text input field with a fixed height, I want the box to look big because of the considerable amount of text that has to be typed in it. The problem is, when the height is set and the user clicks in the box, the text starts right at the center of the box, I would like the text to start on top. My code:
#mainText {
width: 400px;
height: 300px;
}
<div>
<form>
<input type="text" id="mainText" value="Your text">
<button>Submit Text</button>
</form>
</div>
Try using an input type called textarea. It's better for large amounts of text. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
Example usage:
<textarea id="mainText" name="mainText">Your text</textarea>
You can use textarea instead of input which will allow you to enter multiple lines and it will start writting from top left

Vertically align button text?

I have the following code to display text on a generic button: https://jsfiddle.net/6ogo4bqr/
<input id="Button1" type="button" value="Log In" class="btn1" />
<br />
<input id="Button2" type="button" value="Log In" class="btn2" />
<br />
<div id="Button3" class="btn3">Log In</div>
It works fine on Firefox but on an iPad the button text appears more towards the top of the button (though it's OK when it uses Helvetica or Arial):
How can I get the text to align vertically on iOS (BTW I couldn't get JSFiddle to use #font-face)?
Try and remove the top and bottom padding of the text and adding a line-height instead.
#selector{
/*set both top and bottom padding with same values */
padding-top: 20px;
padding-bottom: 20px;
}
I eventually found that the particular font file I used was corrupt. It all worked ok when I replaced the file.

Bootstrap refresh icon with text on Submit button

I would like to have a "Refresh" button on my page. For that I decided to use the bootstrap refresh-icon style. The icon appears on my button but it does not leave much room for the text "Refresh". Here is the code and Fiddle...
<input class="icon-refresh" type="submit" value="Refresh" name="Test"> </input>
http://jsfiddle.net/jjaleel/kVHbV/339/
Anyone have any suggestions on how I can expand the button width so it shows both the refresh icon and the text?
Thanks.
You could use a button tag instead, they were made to be styled with much more control than an input.
Here's how I would use one with the latest bootstrap..
<button class="btn btn-primary"><span class="glyphicon glyphicon-refresh"></span> Refresh</button>
Use a <button>, with the submit action, instead:
<button type="submit"><i class="icon-refresh"></i> Test</button>
JSFiddle
Put the refresh icon in a span inside a button:
<button type="submit" value="Refresh" name="Test"><span class="icon-refresh"></span> </button>
update (based on OP comment)
Without being able to change the markup at all, this is tough. To get rid of the "Refresh" text, set the text-color to transparent. For sizing, set display to inline-block and fix height and width to 20px.
input{
display:inline-block;
color:transparent;
height:20px !important;
width:20px !important;
}

Styling buttons with images?

Ive been trying to style a submit button using an image. I would use CSS but the button is too complex design wise. I have tried adding a background image to a button but the image was badly positioned. I have also tried using
<input type="image" src="myimage.png">
But alas this is not a submit button so It doesn't work. I have looked and tried everything I believe possible but can't find a solution to making the button submit the form. Thanks.
if <input type="image"> doesn't work as expected just try instead
<button type="submit"><img src="myimage.png"></button>
but as I wrote in the comment above your code should work fine too
You have different possibilities for a submit button:
<input type="image">
<input type="submit">
<button></button> <!-- no type needed, since submit is the default type -->
These are all submit buttons. Pick the one, which suits you best.
Now you can choose to put an image between the button or use background-images and position them properly.
Example for button with background-image:
button {
background:url(data:image/gif;base64,R0lGODlhEgASAPYAAAAA/2NFB4tsE7KKCtCiDbWMCpFwDotwGdCgAe65FvjFKvjGLffDJNuqC5V1EaqJGPjHMPbKPvfOTLuRCo5yG+q3F/bEKG1SFdGjBvrcbeGuD2NFCY5wFfG+JPfNRpp1CLSOEfnJNPbOS/rPRsCSBmdJC8+mGvnLOv3ni/3nj/zkgPrUU9uqDWNCA9GoHfjSVfvie/rXW96tEmVHCreQFPnLP/fTXfrbdPzihf3qlP3mhsSYD5VzEPXEOffSWvrbcfzigP3rkqJ8DXFWFd2tFPrQSfnYYvvfdQAAAO7CNGVHDJh3DfLCK/nSUPraZ/zjfv3qkvzlhfvecqiCD2pNEL6TC/fGLvrSTfrbav3pjv3ojPzlgv3TT82kIWpOEZ55C+OyFfnMPvzdb/zda/3XWe/FOqiDEGpKAWZJDXNWEZt2B8KXDt6vHd+yIcifHKN+EXRTAmtQFmlMD2JCBWdIBmdIAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQF+gAAACwAAAAAEgASAAYH/4AAgoN1dHNzcnGDi4Rwb25tbGtqaWiMgmdmZWRjYmNkYWBfXoxnXVxiW1pZWltYV1ZVVIRTXFJRWVC6WU9OTUxLSoJwSWO4SEi6yEdGRURDAHRCV0+5yFBByEA/Pj08SnQ7ZDrWSDlQyDg3NjU0M3MyMTrK5lnIMFgvNS4tLSwrKqCcS4FiC5AnUoxcOWGiRQkSI6ToQKFjy5OLR7DEEBECxBwvH6zEQALjIgwYGUd66MBhA4A0Gkb4QJIhgxQsTkaKOIHhgiAlXyyIaIKsKBIPNSpQmDPIy4QOYUSIkCDCQwQIFR7MYCTHQQMGC6woYJAAwYGtl2ZcMFCAAIEBAg0utLi0aMOGfgHmMgoEACH5BAkFAAAALAYABQAGAAMABgcMgFCCg1BBhodBgoaBACH5BAkKAAAALAYABQAGAAMABgcOgEhIUFCCgkFBhoOFSIEAIfkEAQUAAAAsBgAFAAYAAwAGBwyAUIKDUEGGh0GChoEAOw==) no-repeat 5px center;
padding:5px 5px 5px 27px;
}
<button type='submit'>Submit</button>
(Or as a fiddle)
Use a button element and style it with css. Don't omit the text, you form should be accessible without images or css.
<button type='submit'>Informative submit text</button>
button {
background-image:url('myimage.png');
}
In case someone needs a newer html5 good answer:
<button id='' name='' value='' ><img src='img.jpg' /></button>
<input type="image" src="myimage.png">
or
<input type="submit" style="background:url(myimage.png)">

whats the best way to style a background image on a textbox ex:searchbox

I've done this before but for some reason im trying to right now and im using fieldset to display the background image and i can only get it to look nice in firefox. Whats a good cross-browser solution to adding a background image to a textbox.
example i was trying
<div class="subscribe">
<form method="get" id="searcform" action="">
<fieldset class="search">
<input type="text" class="box" value="Subscribe to Email Newsletter" />
<button class="btn" title="Subscribe">Subscribe</button>
</fieldset>
</form>
</div>
I'm not sure precisely what element you mean, but the following should work:
input[type=text],
textarea {
background: #fff url(path/to/image.png) 0 0 no-repeat;
}
Simply make your input transparent and place inside a container div.
Example: http://jsfiddle.net/LRWWH/
Cross browser friendly.