input和textarea中字体样式不同的解决方法

当我们写一个输入框群组时，input和textarea中字体样式会不同，比如下面：

里面输入的字也不一样：

代码在这里：

html：

1. <div style="margin: 0 auto; width: 800px; height: 800px;">

2. <input type="text" name="email" class="info-input" placeholder="您的邮箱地址"><br>

3. <textarea name="message" class="info-textarea" style="overflow: hidden" placeholder="您的留言内容"></textarea>

4. </div>

css：

1. .info-input {

2. width: 570px;

3. height: 35px;

4. margin-top: 14px;

5. border: 1px solid #DDDDDD;

6. box-sizing: border-box;

7. padding-left: 13px;

8. box-shadow: 0px 13px 10px -15px #ccc inset;

9. }

10. input::-webkit-input-placeholder{

11. color: #999999;

12. }

13. .info-textarea {

14. width: 570px;

15. height: 150px;

16. margin-top: 14px;

17. border: 1px solid #DDDDDD;

18. box-sizing: border-box;

19. padding-left: 13px;

20. padding-top: 13px;

21. resize: none;

22. box-shadow: 0px 13px 10px -15px #ccc inset;

23. }

24. textarea::-webkit-input-placeholder{

25. color: #999999;

26. }

我们可以看出是默认样式出了差异，解决方法也很简单，分别为所有属性增加字体种类和字体大小即可。

代码如下：

1. .info-input {

2. width: 570px;

3. height: 35px;

4. margin-top: 14px;

5. border: 1px solid #DDDDDD;

6. box-sizing: border-box;

7. padding-left: 13px;

8. font-family:"微软雅黑";

9. font-size: 14px;

10. box-shadow: 0px 13px 10px -15px #ccc inset;

11. }

12. input::-webkit-input-placeholder{

13. color: #999999;

14. font-size: 14px;

15. font-family:"微软雅黑";

16. }

17. .info-textarea {

18. width: 570px;

19. height: 150px;

20. margin-top: 14px;

21. border: 1px solid #DDDDDD;

22. box-sizing: border-box;

23. padding-left: 13px;

24. padding-top: 13px;

25. resize: none;

26. font-family:"微软雅黑";

27. font-size: 14px;

28. box-shadow: 0px 13px 10px -15px #ccc inset;

29. }

30. textarea::-webkit-input-placeholder{

31. color: #999999;

32. font-size: 14px;

33. font-family:"微软雅黑";

34. }

html不变。效果图就不上了，自己试一下就好。